将元素放置在对象适合上：包含的图像

Question

我使用对象适合来包含 div 中的图像，如下所示：https ://jsfiddle.net/d3r50L57/2/

<div class="img_container">
    <img src="https://cdn2.vox-cdn.com/thumbor/MR8HRp3Zgp8Dhn2wUD8ujrbbbJc=/33x0:1893x1046/1600x900/cdn0.vox-cdn.com/uploads/chorus_image/image/48754639/firewatch_review_main.0.0.jpg">
</div>

和

.img_container{
  width: 300px;
  height: 200px;
  background-color:orange;
}

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

我想仅在图像上放置文本叠加层，但问题是，由于它已通过对象适合包含调整了大小，因此当我选择图像元素时，也会选择因重新调整而留空的空间。在示例中，如果您检查图像元素，您会发现顶部和底部的空白被视为图像的一部分，因此它使得仅覆盖图片变得困难。任何指示或解决方法将不胜感激。

谢谢。

Answer 1

object-fit仅当元素（即 img）：

1. 定义了它的宽度和高度。
2. 并且必须是被替换的元素。

如果 img 的高度为 100%，那么这将是其父级的 100%（即.img_container200px）。因此，如果您只想选择可见的内容，那么您应该使用 img 尺寸，因为它与其 AR（长宽比）相关。因此，不要使用 100% 高度，而是尝试使用 auto。将高度更改为自动后，您的图片将不再垂直居中.img_container。有几种方法可以使 img 垂直居中，但为了简单起见，我已经做了数学计算，它是margin-top: 15.625px*.

.img_container {
  width: 300px;
  height: 200px;
  background-color: orange;
}
img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: 15.625px;
}

<div class='img_container'>
  <img src='https://cdn2.vox-cdn.com/thumbor/MR8HRp3Zgp8Dhn2wUD8ujrbbbJc=/33x0:1893x1046/1600x900/cdn0.vox-cdn.com/uploads/chorus_image/image/48754639/firewatch_review_main.0.0.jpg'>
</div>

*TL;DR 这个特定 jpeg 的自然尺寸是 1600x900px，所以它的 AR 是 16:9。所以如果宽度减少到 300px，它的高度应该是 168.75px。父级的高度为 200px，因此对于 img 来说，img 高度的一半.img_container( ic/2 = 100) 与 img 高度的一半 ( img/2 = 84.375) 之差为 15.625px margin-top。