I'm currently facing an issue with an image in a flex container. My goal is to maintain the image's ratio when the height of the container or window is decreased or resized.
html,
body {
height: 100%;
}
.wrapper {
display: flex;
width: 100%;
height: 60%;
border: 1px solid red;
}
.image-container {
display: flex;
align-items: center;
max-width: 30%;
height: 100%;
background: green;
}
img {
max-width: 100%;
max-height: 100%;
}
.content {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
width: 100%;
height: 100%;
background: yellow;
}<div class="wrapper">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/1200px-Clouds_over_the_Atlantic_Ocean.jpg" alt="">
</div>
<div class="content">
<span>Some content</span>
</div>
</div>Currently, only the image's height changes while the width remains constant, causing the image to be stretched. Removing 'display: flex' from the image container solves the resizing issue, but I require it for centering purposes.
Is there a way to resize the image and other containers fluidly while maintaining the aspect ratio?