我正在尝试在一些Flexbox容器中使用object-fit:contain
使我的图像具有响应性,虽然图像确实会重新调整大小,但布局似乎仍保持原始图像大小,导致出现滚动条。
使用Chrome Dev Tools检查图像的宽度显示宽度仍为1024(但高度已适当缩小)。
(我从Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?获得了灵感来到达这一点)
我是否缺少其他CSS属性?
JSFiddle: https://jsfiddle.net/w6hgqf18/1/
html,
body {
margin: 0;
height: 100%;
}
.page {
height: 100%;
display: flex;
}
.main-container {
flex: 1 1 0;
display: flex;
flex-direction: column;
}
.half-containers {
flex: 0 1 50%;
overflow: auto;
box-sizing: border-box;
border: 0.5px solid red;
display: flex;
}
.page-header {
flex: 0 0 auto;
background-color: #dcdcdc;
}
.page-footer {
flex: 0 0 auto;
background-color: #dcdcdc;
}
img {
object-fit: contain;
}
<div class="page">
<div class="main-container">
<div class="page-header">
This is a header
</div>
<div class="half-containers">
<img src='https://i.imgur.com/tqQvuFr.jpg' />
</div>
<div class="half-containers">
<img src='https://i.imgur.com/tqQvuFr.jpg' />
</div>
<div class="page-footer">
This is a footer
</div>
</div>
</div>
object-fit
为什么会表现出这样的行为。这不是关于自动调整图像大小的问题,这已经在这里完成了。这是关于“为什么object-fit会表现出这种行为”的问题。 - Temani Afif