Reply To: Can anyone help with this example

[Beverleyh]

How do this technique make the images scale in unison?

By using the padding-bottom technique to create a scaleable height for the large img. The technique is described here http://andyshora.com/css-image-container-padding-hack.html but the difference with your demo is that you need to base the scaling height of the large img not on its own dimensions, but on the dimensions of the small imgs instead, and they’re 746 x 413 px.

So using the calculation in the linked page;

413 / 746 x 100 = 55.36193

The padding-bottom value for a small img would therefore be 55.36193%

But to make it work for the large img, while still looking at the formation of the small img for cues, the % value used in your demo needs to be doubled up (the height of 2 small imgs), and also take into account the height of 2 title grey bars (I set them to 5rem), plus the white-space margin between (2.5rem). This deals with the height of the large img’s wrapper – the a element – but your large img inside isn’t exactly perfect proportions, so I’ve set overflow:hidden; on .fold to crop off any extra width overhang as the img expands. This gives an overall behaviour that’s similar to background-size:cover; on a background-image but for an img element instead.

One final note; the img is absolutely positioned to the container’s right to give the “100+ years” text the best chance of being visible, but you can change this depending on the img used.

Hope that helps