我使用 flexbox 编写了这个响应式图片库代码
我将每个 flexbox_item 的背景颜色样式设置为青色,以显示每个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>
答案 0 :(得分:1)
object-fit
属性设置在包裹图像的div .flexbox_item
上,它们实际上填充了这些框。但是图像没有设置为填充这些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>
&#13;
答案 1 :(得分:0)
尝试使用background-size: 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 {
width: 100%;
background-size: cover;
object-fit: cover;
height: 100%;
overflow: hidden;
background-attachment: fixed;
background-position: center;
}
</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>