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

Posted 2023-03-05

【中文标题】包含带有父 <div> 的图像大小

【英文标题】：Contain image size with parent <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%

【参考方案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 上运行良好。