Marcin Wichary3d ago

Is it possible in CSS to have an image that has originally specified size (= no relayout when it loads), both (independent) max-width and max-height, and has a border (which precludes object-fit and all those shenanigans?)|

It seems that when max-width and max-height both kick in, they basically override aspect ratio to become something alien. object-fit allows the image to keep aspect ratio “inside itself”, but then that ruins the border which wraps the resulting pillar- or letterboxing.

Show threadGeoff Coffey3d ago
@mwichary Are you setting width and height to auto? I’m not totally following and I’m not in a place to try anything right now but my recollection is you definitely can have max-width and max-height without disregarding aspect ratio but you might need explicit auto width and height.
Show threadMarcin Wichary3d ago
@gwcoffey width and height being auto would mean the risk of page reflowing as the image loads… (and also, I need the images being at precise sizes if they fit, not e.g. always width of the container).
Show threadGeoff Coffey3d ago
@mwichary I meant css width and height of auto assuming you had intrinsic width and height attributes on the img element. But honestly I’m very fuzzy on how all these fit together. I just feel like I’ve done this before with the same goals — no reflow, respect aspect ratio, fit in a box, and add a border. If I’m way off base pls disregard. Normally I’d try this stuff before spouting off haha.
Show threadMarcin Wichary3d ago
@gwcoffey Yeah, me too. I think what I was is possible easily if you just remove one of the requirements. But it seems this specific constellation is too complex for CSS – even though it doesn’t seem complex at all.
Show threadMarcin Wichary3d ago
@gwcoffey My uneducated guess is maybe that in your use case you never had images *smaller* than max height? That feels pretty natural for stuff like photos and most use cases, but my thing doesn’t guarantee it.
Show threadMarcin Wichary
@gwcoffey But let me know if you remember. I will post a live example in a second, too.
Apr 7 at 1:58amWeb
Show threadMarcin Wichary3d ago
@gwcoffey Here it is: https://mastodon.online/@mwichary/116360976334148102