Can anyone help with this example

[Ricky55]

Hi guys

I’m struggling to make the large image on the right be in line visually with the other items when the screen scales.

https://codepen.io/qwerty-design/pen/PQVzaL?editors=1100

[Beverleyh]

Assuming you mean for the heights to match?

Without JavaScript, I think this is the best you could manage with CSS alone https://codepen.io/anon/pen/wyZPzy
It uses the padding-bottom % technique to create a faux img height. The faux height is a combination of small img heights + white space margin + bottom title bar heights. Calculations are in CSS comments.

Bear with me cos I’m on mobile – I haven’t tested on desktop, or by any screen resizing mechanism other than those provided in the mobile view of CodePen.

[Ricky55]

Wow thanks Beverley that was doing my head in. I knew it would be possible with JS but I didn’t want to resort to that and yes I did mean for the heights to match.

I’m on mobile myself just now but it looks good from what I’ve seen.

How do this technique make the images scale in unison?

Thanks so much I really appreciate it.

[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

[Ricky55]

You are a complete legend thank you so much!!

My client loved this design and I was just about to tell him I couldn’t do it. You’ve saved his disappointment.

Thank you!

[Beverleyh]

Ha, ha. No problem :)

[Author]

Posts