包含父 <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

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

img {
  width: 100%;
  height: 100%;
  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;
}