[ 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: 1791371205132.jpg (239.43 KB, 1024x1024, img_1791371195292_1m2o9u9a.jpg)ImgOps Exif Google Yandex

32a3a No.2188

Images loading late always breaks my layout because the page jumps around while the browser calculates the height. I've started setting aspect-ratio on the img tag itself so the space is reserved before the actual file downloads. It keeps things stable and prevents that annoying layout shift during page load.

img {width: 100%;aspect-ratio: 16 / 9;object-fit: cover;}

32a3a No.2217

>>2188
Setting that on the img tag itself might cause weird stretching if the original file isn't actually 16/9. I always figured it's better to use a wrapper div with the ratio so the image can just sit inside without getting cropped by object-fit. I'm still pretty new to this stuff but doesn't that approach handle different image sizes more gracefully?



[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 ]