eliaxelang007
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