对象适合:填充;不起作用

时间:2018-04-19 14:29:32

标签: css responsive-design flexbox image-gallery object-fit

我使用 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>

2 个答案:

答案 0 :(得分:1)

object-fit属性设置在包裹图像的div .flexbox_item上,它们实际上填充了这些框。但是图像没有设置为填充这些div,所以它们保持不变。

您可以为此图像添加width: 100%; height: 100%;

注意:如果尺寸不是正方形,fill会拉伸您的图像,您可以尝试使用cover以保持初始定量(图像被裁剪以便它们可以填充容器)

&#13;
&#13;
<!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;
&#13;
&#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>