包含带有父 <div> 的图像大小

【问题标题】：Contain image size with parent <div>包含带有父 <div> 的图像大小
【发布时间】：2019-01-09 11:03:04
【问题描述】：

我一直在尝试让我的图像在同一行上彼此相邻，并在需要时将它们裁剪为更小的尺寸。为什么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;
}

【问题讨论】：

所以我希望图像保持不变（没有任何内容被剪切），但我只希望大小与父 DIV .inner 相同。我是编码新手，所以如果有什么不明白的地方请告诉我。
在.inner img 中尝试height: 100%

标签： html css image flexbox object-fit

【解决方案1】：

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

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

完整的sn-p：

.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>

【讨论】：

我不确定这是否适用于 Firefox 和 Edge。有什么想法吗？
@ConAntonakos - 就我而言，它在 Firefox、Edge 和 Chrome 上运行良好。