我使用flexbox 编写了此响应式图库代码，将
每个flexbox_item的背景颜色样式设置为cyan，以显示每个flexbox_item块的尺寸：
background-color: cyan;
现在我想让图像填充其块，所以我使用了：
object-fit: fill;
但这不起作用！
我尝试了很多事情，但是图像仍然无法填充！请帮忙 。这是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.main_container {
position: relative;
margin: 0 5% 0% 5%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.flexbox_container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.flexbox_item {
background-color: cyan;
flex-basis: 25%;
object-fit: fill;
}
img {
vertical-align: middle;
}
</style>
<body>
<div class="main_container">
<div class="flexbox_container">
<div class="flexbox_item">
<img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
</div>
<div class="flexbox_item">
<img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
</div>
<div class="flexbox_item">
<img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
</div>
<div class="flexbox_item">
<img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
</div>
</div>
</div>
</body>
</html>该object-fit属性在.flexbox_item包装图像的div上设置，它们实际上填充了框。但是图像未设置为填充这些div，因此它们保持不变。
您可以width: 100%; height: 100%;为此添加图像。
注意：fill如果尺寸不是正方形，则会拉伸图像，您可以尝试使用cover以便保持初始定量（裁剪图像以便填充容器）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.main_container {
position: relative;
margin: 0 5% 0% 5%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.flexbox_container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.flexbox_item {
background-color: cyan;
flex-basis: 25%;
object-fit: fill;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
</style>
<body>
<div class="main_container">
<div class="flexbox_container">
<div class="flexbox_item">
<img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
</div>
<div class="flexbox_item">
<img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
</div>
<div class="flexbox_item">
<img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
</div>
<div class="flexbox_item">
<img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
</div>
<div class="flexbox_item">
<img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
</div>
</div>
</div>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句