3

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

4

2 回答 2

1

该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>

于 2018-04-19T14:37:29.997 回答
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>

于 2018-04-19T14:38:08.120 回答