Responsive Images & Video

Flexible images and object-fit

max-width: 100% makes images shrink to fit. object-fit: cover lets you set a fixed size and crop the image neatly instead of squashing it.

<style>
  .thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; }
</style>
<img class="thumb" src="https://picsum.photos/600/200" alt="cropped neatly">

The image is forced into a fixed shape — width: 100% and height: 120px — which would normally squash it. object-fit: cover fixes that: instead of stretching, it scales the image to fill the box and crops whatever does not fit, keeping the proportions correct. This is how you make a row of thumbnails all the exact same size without any of them looking distorted. (object-fit: contain would instead fit the whole image inside, possibly leaving gaps.)

Responsive video embeds

An embedded video (like a YouTube clip) lives inside an <iframe> — a tag that shows another web page inside your page, in a little window. The trick to making it responsive is to wrap that <iframe> in a box that keeps a fixed aspect ratio (its width-to-height shape — 16 / 9 is the standard widescreen shape) so it scales with the page. The example below does this with the modern aspect-ratio property:

<style>
  .video { aspect-ratio: 16 / 9; width: 100%; }
  .video iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
</style>
<div class="video">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="video"></iframe>
</div>

The wrapper .video has aspect-ratio: 16 / 9 and width: 100%, so it is always full-width and keeps the widescreen 16:9 shape at any size — its height is calculated automatically from its width. The iframe inside is set to width: 100%; height: 100% so it completely fills that shaped box. The result: a video that grows and shrinks with the page but never goes letterboxed or stretched.