包含父图像大小 <div>

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

您应该在 img 上设置 width 和 height 以便与 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>

包含父图像大小 <div>

Contain image size with parent <div>

html

css

image

flexbox

object-fit