logo标签列表

object-fit: fill; 不起作用。

cssresponsive-designflexboximage-galleryobject-fit
4

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

2个回答
1
包装图像的
上设置了object-fit属性，它们实际上填充了框。但图像没有设置为填充这些
，所以它们保持不变。

你可以为图像添加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>

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接