image heights and scaling on mobile

[Monamos]

Hi guys. I am trying to work out a way to set rules for how images will get vertically scaled up on mobile. I have a site with lots of landscape format images. However on mobile these end up looking like quite small thumbnails. I'd like to be able to scale the vertical heights of these (cropping the sides is ok), so they fill up more of the mobile browser.

Is there a best practice approach for this using Lay?

[arminunruh]

i see

at the moments its probably best to create a custom phone layout and put in portrait images,

if you're good with css, maybe you can use
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
and
maybe https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

and probably the padding-bottom .ph div inside of an image element. you probably need to adapt it with css too

[Monamos]

Thanks @arminunruh I've worked around a little hack which sort of solves it. For images that I want to scale vertically on mobile, I have added them as row background images, and then given the row a height like 100vh. This then scaled it right up on mobile and crops the side. The only caveat being I need to make sure those images can scale gracefully and not lose important details in the crop.

Do you see any problem with using viewport heights and row background images on different browser versions or devices?

[arminunruh]

no, i think its a clever solution!