What we did

This month we looked at aspect ratio. Aspect ration is the relationship between the height and the width of an image or video. Most cameras have an aspect ratio of 3:2. My Nixon is 6000 W X 4000 H pixels; that its dimensions. The aspect ratio is the relation between the height and width which is 3:2 or 1.5/1. If the ratio is X / Y we get a fraction to 1 by / both sides by the common divisor until you get the lowest whole number.

Heres a calculator

https://www.embibe.com/exams/ratio-calculator/

Here is a list of the relative sizes.

The dimensions can be different and still maintain the ratio. If I reduce the dimensions to 600X400 I have halved the size but maintained the ratio.

Recently the css standard has be revised to include an aspect ratio. Before we had calculate a percentage and add it to the top or bottom margin to force the browser to maintain the scale.

Now we have aspect ratio so we can simply add the correct aspect to our css.

We had a look at a Ray Skinner's CSS Image Aspect Ratios Codepen example using the old method.

The code creating the aspect ratio looks like this

.img-ratio-3-2 { padding-bottom:66.66%; /* 3:2 Aspect Ratio (divide 2 by 3 = 0.66) */;}

We then modified the code by removing old code and adding the aspect ratio.

.aspect-32 { aspect-ratio: 3/2;}

Naturally they look the same.

The CSS Tricks site has a great article on Aspect Ratio.

Here is the test site we did using Ray Skinner's CSS Image Aspect Ratios Codepen

Steve South

Steve South

Web Design leader