Objective
- I aim to place an image within a child div that is a flex item in a parent flex container.
- The goal is for the image's height to be equal to the height of its containing div while still maintaining its aspect ratio.
My understanding
- Setting the image's height to 100% should adjust its size to match the child div's height while preserving its aspect ratio. (this behaves as expected)
- However, the width of the child div does not adjust accordingly and ends up matching the original width of the unscaled image. (this is not the desired outcome)
Issue
The width of the child div matches the intrinsic width of the image rather than adapting to the scaled-down image's new width, resulting in extra space on the right side of the child div.
<html>
<head>
<style>
.parent {
display: flex;
width: 1000px;
height: 400px;
padding: 10px 0px;
background-color: red;
}
.child {
padding: 10px 0px;
background-color: blue;
}
.child > img {
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg" alt="some img">
</div>
</div>
</body>
</html>