Resizing images in the DOM


show more Resizing images in the DOM provides you with in-depth training on Developer. Taught by Ray Villalobos as part of the JavaScript: Enhancing the DOM show less
please wait ...

Resizing images in the DOM

And the last movie, we were able to place the images onscreen, but they're way too huge. We need to adjust them to fit within the size of the current window. So, what I want to do is re-size the images. The problem is, I can't do this before I finish loading the image. If I try to calculate the size of the image before it's loaded, it's going to assume that the image doesn't have any size. I need to make sure that I create an event that waits until the image is finished loading and then calculates its size. So, I'm going to take this off right here, and I'm going to add sequence that the image has loaded. I'm also going to add another comment up here.

So, right down here, I need to add an event listener. So, I'm going to target my large image and then add an event listener. I'm going to look for the load event and execute a function once the image has loaded. And what I want to do is check to see the image is taller or wider, so will...

Resizing images in the DOM
Video duration: 2m 59s 2h 3m Intermediate

Viewers:

Resizing images in the DOM provides you with in-depth training on Developer. Taught by Ray Villalobos as part of the JavaScript: Enhancing the DOM

Subjects:
Developer Web
Software:
HTML JavaScript
Author:
please wait ...