I’m trying to make an image stay within its DIV without changing the image’s aspect ratio. The DIV is set to “Stretch” as a flex item so that I can contain the image inside without it overflowing, however when I do so, the image’s aspect ratio gets funky.
I tried to fix the issue by having the image “Stretch” in a flex layout, so it doesn’t overflow anymore, but now the image’s aspect ratio is messed up:
Most famous/supported way for responsive images is this code (fluid images):
img{
width: 100%;
height: auto;
}
By the way this trick was one of three layers of responsive design when Ethan Marcotte coined this term “responsive web design” in 2010:
Should work fine.
Today You have a lot more ideas/tricks but not all - well supported - object-fit for example. See this Q to get more ideas:
Your case:
change Image Section to display block (no need for nested flex grid her - see “extra nested” later).
If you also want all to center vertical see this tutorial (add the “align-center” flex option to Flex Section) https://university.webflow.com/article/centering-elements-with-flexbox
Change image to width: 100 - height: auto
Set Flex Section height to be min:100vh → remove 100vh from the section-wrapper (you want align items relative to 100vh of flex-section)
Extra Nested
flex-parent (wrraper) vs flex-child (col): In your code you add endless time display:flex (for parent-child-child) this create nested-grids and very hard to style code. Most of the time the parent is display:flex and the child-wrapper is block (if you also set the child to display flex - is for nested grid and complex layout).
For very simple layout its better to work with flexbox grid columns). The main reason its more easy to control responsive layout like this. https://university.webflow.com/article/columns
HTML5 elements
Out of topic: For more clean/semantic code: Change section to really be sections :)
