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

/ui/ - UI/UX Lab

Interface design, user experience & usability testing
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1789565019431.jpg (147.51 KB, 1024x1024, img_1789565010991_rwny2hrz.jpg)ImgOps Exif Google Yandex

b5e0c No.2163

Spent all Tuesday fixing those annoying jumps when images load in our new dashboard. I stopped using padding hacks and just used the aspect-ratio property instead. It keeps the container size locked so the content doesn't teleport slide around while the assets are fetching. Definitely use this for your product grids or any card component where you know the height ahead of time.

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


It makes a huge difference for the perceived stability of the page. It's much cleaner than calculating percentages manually.


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