对象拟合：填充；不工作[重复]答案

【问题标题】：object-fit: fill; does not working [duplicate]对象拟合：填充；不工作[重复]
【发布时间】：2023-03-11 08:55:01
【问题描述】：

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

【问题讨论】：

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

【解决方案1】：

尝试使用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>

【讨论】：

【解决方案2】：

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>

【讨论】：