eliaxelang007
KPCKevin Powell - Community
•Created by eliaxelang007 on 1/15/2025 in #front-end
Is there something like `object-fit: contain` for non-replaced elements?
Hello Kevil Powell community! I'm a bit of a noob with HTML and CSS, but I'd really like to learn.
Recently, I've been trying to create a centered
div
with an aspect ratio of 3 / 7 that fills its parent the best can, acting something like object-fit: contain
. Unfortunately, object-fit: contain
doesn't seem to work for non-replaced elements.
Here's a visualization of what I want to achieve in Flutter, which is something I have slightly more experience in.
https://dartpad.dev/?id=eec1210050a099df1c5422fa66e891e5
It's fairly straightforward to create a div
with an aspect-ratio
with a fixed width
or height
, but I can't seem to make it work once it becomes responsive.
I'd appreciate any help! Thanks!37 replies