我使用了flexbox编写了这个响应式图库代码。
我将每个flexbox_item的背景颜色设置为青色,以显示每个flexbox_item块的尺寸:
background-color: cyan;
现在我想让图片填满其块,所以我使用了:
object-fit: fill;
But it doesn't work!
I tried many things but still images not filling their blocks ! please help . here is the code :
<!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>