image heights and scaling on mobile
-
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?
-
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-ratioand probably the padding-bottom .ph div inside of an image element. you probably need to adapt it with css too
-
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?
-
no, i think its a clever solution!
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it