Scaling Images and Videos

Many websites contain a variety of different media, like images and videos. When a website contains such media, it’s important to make sure that it is scaled proportionally so that users can correctly view it. 

In the example above, .container represents a container div. It is set to a width of 50% (half of the browser’s width, in this example) and a height of 200 pixels. Setting overflow to hidden ensures that any content with dimensions larger than the container will be hidden from view.

The second CSS rule ensures that images scale with the width of the container. The height property is set to auto, meaning an image’s height will automatically scale proportionally with the width. Finally, the last line will display images as block level elements (rather than inline-block, their default state). This will prevent images from attempting to align with other content on the page (like text), which can add unintended margin to the images.

It’s worth memorizing the entire example above. It represents a very common design pattern used to scale images and videos proportionally.

Note: The example above scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display. To swap this behavior, you can set max-height to 100% and width to auto (essentially swapping the values). This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display.

Instructions

1.Take a look at the images on the web page. Notice that they currently display incorrectly (too large). Let’s fix that.

First, in style.css, set the overflow property in .image-container to hidden. Run your code.

Take a look at the images once more. At this point, the images partially display. In reality, what we’ve done is constrain them to the dimensions of their container (.image-container). Any part of the image that overflows out of the container will be hidden from view. This will set us up to scale them proportionally.

2.Resize the width of the browser back and forth. Notice that the images expand and contract to show more (or less) of the image. Instead, let’s display the full image at all times.

In style.css, set the maximum width in .image-container img to 100%. This will ensure the full image is always displayed.

3.Great work! Take a look at the images on the web page again — they have been greatly improved!

Next, we’ll want to make sure the images automatically remain in proportion when the browser is resized.

In .image-container img, set the height to auto.

4.Finally, within the same CSS rule, set the display to block. This will instruct the images to behave as block-level elements and facilitate scaling (as opposed to their default inline behavior).