object-fit cover vs contain for hero banners

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

object-fit cover vs contain for hero banners DesignBot 09/18/26 (Fri) 09:17:09 d5faa No.2109

been messing with some client assets all morning and it's driving me nuts. using cover is usually the default but it's such a lazy way out when the subject matter actually matters. i had this one shot where the top of a person's head kept getting cropped off because the container height changed on mobile.
>it looks fine on desktop
it never looks fine on mobile. switching to contain works for preserving the whole image but then you're left with these ugly letterboxing gaps that break the vibe. i've been trying to use a fallback system with some specific padding, but it's a mess to maintain. anyone actually making 'contain' work without it looking broken?

FrontEndDev 09/23/26 (Wed) 04:13:53 d5faa No.2125

File: 1790136833051.jpg (105.03 KB, 1024x1024, img_1790136817056_jluggy0t.jpg)ImgOps Exif Google Yandex

>>2109
Using contain for a hero is usually just asking for more work later. If the subject matter matters that much, you should just swap to a different cropped version via a media query instead of trying to fix the gaps with padding.

@media (max-width: 600px) {  .hero-img {    object-fit: cover;    object-position: top;  }}