CSS Aspect Ratios

Defining an Aspect Ratio

Mostly implemented on images, here's how you can make one portraid different:

The first value of the aspect ratio (num/num) is the width and the second value is the height. You can make the aspect numbers as big you want - see how the image reacts.

Fixed Aspect Ratio Video

To make your video place feel like its from YouTube, make it an aspect ratio of 16/9:

The video stays always at the same format and the "wrapper" div has the maximum width of 640 pixels, where the video element was to take 100% of that, meaning it will not get bigger than 640px.

Grid Objects with Aspect Ratio

Its possible to set the height and width without units directly on an element if you put an aspect ratio on it and define a grid template column layout for it:

The grid layout understands that you want to expand the elements to take the full width of page. Every 200 pixel gain on screen makes a card break into row, as long as the screen width allows that - else it goes column.