Aspect Ratio

The .aspect-ratio-* classes specify an aspect ratio for an element.

When used on an <img> element, the image will be clipped to fit the specified ratio. When used on <iframe> elements, they will scale proportionally regardless of screen size.

Example: Image

This image has a natural aspect ratio of 3x2, but has the .aspect-ratio-1x1 class applied to it.

<img 
	class="aspect-ratio-1x1"
	height="250" 
	width="250" 
	alt="A gorgeous jellyfish drifting in the ocean" 
	src="/img/docs/jellyfish.jpg"
>

Example: iFrame

This video scales proportionally regardless of screen size.

<iframe 
	class="aspect-ratio-16x9" 
	width="560" 
	height="315" 
	src="https://www.youtube.com/..." 
	title="YouTube video player" 
	frameborder="0" 
	referrerpolicy="strict-origin-when-cross-origin" 
	allowfullscreen
></iframe>