Question

我一直试图让我的图像在同一行上彼此相邻，并根据需要将它们裁剪为较小的尺寸。 object-fit为什么不起作用？

HTML：

<div class="gallery">
  <div class="inner"><img src="images/image1.jpg"></div>
  <div class="inner"><img src="images/image2.jpg"></div>
  <div class="inner"><img src="images/image3.jpg"></div>
</div>

CSS：

.gallery{
  width: 1000px;
  height: 300px;
  display: flex;
}

.inner{
   width: 333px;
   height: 300px;
}

.inner img{
   object-fit: contain;
}

Answer 1

您应该在width上设置height和img以便与object-fit一起使用。看来object-fit: cover;可能就是您想要的。

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

完整摘要：

.gallery {
  width: 1000px;
  height: 300px;
  display: flex;
}

.inner {
  flex: 0 0 33.333333%;
  /*or flex: 1; */
  /*or width: 33.333333%; */
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="gallery">
  <div class="inner"><img src="https://picsum.photos/300/300"></div>
  <div class="inner"><img src="https://picsum.photos/400/600"></div>
  <div class="inner"><img src="https://picsum.photos/600/400"></div>
</div>

Answer 2

根据您的需求，前面的一些回答应该会有所帮助。您尝试使用的object-fit属性要求您设置img的尺寸，以便浏览器有一些特定的东西可以“适合”图像。这是对您的代码进行了稍微修改以更正在html中输入错误，在.inner容器和占位符图像中添加边框以说明拟合的工作原理，并在width元素中添加height和img属性使object-fit为您服务。

.gallery {
  height: 300px;
  width: 1000px;
  display: flex;
}

.inner {
  width: 333px;
  height: 300px;
  border: 1px solid red;
}

.inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="gallery">
  <div class="inner">
    <img src="https://via.placeholder.com/50x50">
  </div>
  <div class="inner">
    <img src="https://via.placeholder.com/50x50">
  </div>
  <div class="inner">
    <img src="https://via.placeholder.com/50x50">
  </div>
</div>

通过父DIV包含图像大小

2 个答案: