将图像的比率保存在高度调整大小的柔性容器中
问题描述:
我在flex容器中的图像出现问题。当容器/窗口高度减小/调整大小时,我希望它保持比例。将图像的比率保存在高度调整大小的柔性容器中
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>
当您尝试这样做,你可以看到,只有图像高度的变化,但宽度保持不变,图像被那种捉襟见肘。
当我从图像容器中删除'display:flex'时,图像大小调整良好。我让它变成了flex,因为我希望它能够居中。
有没有一种方法来保持比例和流畅地调整图像和容器的其余部分?
在这个'fiddle'无拉伸,宽度和高度调整大小。 – Pedram
尝试调整输出窗口的大小。 – somedev
@pedram,通常在我的应用程序中我有一个选项,当用户执行特定操作时,此包装容器会降低其高度。这就是为什么我在这个时候谈论窗口大小调整的原因。当你不断减小输出窗口的高度时,你会看到图像的宽度不会改变。 – somedev