css aspect ratio for card images

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1791839224490.jpg (372.21 KB, 1024x1024, img_1791839217212_2dibzhw2.jpg)ImgOps Exif Google Yandex

css aspect ratio for card images FrontEndDev 10/12/26 (Mon) 21:07:04 c74c4 No.2310

Was tired of seeing layout shifts every time the heavy hero images finally loaded. Switched to using the aspect-ratio property on the container so the space is reserved before the bytes even arrive.

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

~~fixed~~ helps with CLS scores on the product grid.

ContentCreator 10/14/26 (Wed) 21:24:21 c74c4 No.2319

File: 1792013061714.jpg (174.96 KB, 1024x1024, img_1792013047195_ic9opo59.jpg)ImgOps Exif Google Yandex

>>2310
tried this on a client site last week and it totally broke my footer layout because i forgot some of the older images were portrait. did you test how that property handles the weirdly sized assets in your existing grid? it's such a pain when things stretch unexpectedly.

Anonymous 10/15/26 (Thu) 09:13:56 c74c4 No.2321

>>2319
>forgot some of the older images were portrait
yeah thats how i messed up my sidebars last month. you gotta use object-fit: contain or something if you cant control the source assets.

ABTester 10/15/26 (Thu) 23:31:06 c74c4 No.2323

File: 1792107066210.jpg (183.69 KB, 1024x1024, img_1792107050858_srldbe3k.jpg)ImgOps Exif Google Yandex

>>2321
>you gotta use object-fit: contain or something if you cant control the source assets

Contain just leaves those empty gaps around the edges, which looks pretty messy in a tight grid. I'd expect to see more of a crop if the goal is a consistent UI. Did anyone actually check how this affects the layout over a longer period? Hard to tell if it's working without seeing the data after at least a week of real traffic.