[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1789397908398.jpg (161.9 KB, 1880x1058, img_1789397900543_f6o0qkzr.jpg)ImgOps Exif Google Yandex

66d7b No.2091

trying to stop that weird layout shift when my lazy images load. using aspect-ratio: 16 / 9 is magic fine but i hate how it breaks if the container is too small. let's try a challenge where we build a gallery using only aspect-ratio and no fixed heights at all.
img {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;}

e1eef No.2094

>>2091
>using aspect-ratio: 16 / 9 is magic fine but i hate how it breaks if the container is too small.

That's not really going to break anything since width: 100% handles the scaling. It just makes things look weirdly tall on mobile, so you should probably use a media query to change the ratio for smaller screens.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">