文章/答案/技术大牛

发布

社区首页 >问答首页 >将元素置于对象匹配之上:包含的图像

问将元素置于对象匹配之上:包含的图像
EN

Stack Overflow用户

提问于 2016-08-13 15:14:28

回答 1查看 892关注 0票数 4

我使用object fit来包含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;
}

我只想在图像上加一个文本覆盖，但问题是，由于它已经被对象匹配的包含调整了大小，所以当我选择图像元素时，也选择了重新填充时留下的空空间。在这个示例中，如果检查图像元素，就会看到顶部和底部的空白被认为是图像的一部分，因此很难在图像上进行叠加。如有任何建议或解决办法，将不胜感激。

谢谢。

jquery

html

css

回答 1

Stack Overflow用户

发布于 2016-08-14 10:58:09

如果元素(即img)： is only effective：

定义了它的宽度和高度。
必须是一个被替换的元素。

如果在img上有100%的高度，那么这将是它的父级的100% (即.img_container 200‘s)。所以，如果你只想选择什么是可见的，那么你应该使用img的尺寸，因为它与它的AR (高宽比)有关。所以，不要100%的高度，试试汽车。在将高度更改为auto后，您的img将不再在.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。所以如果宽度缩小到300 be，那么它的高度应该是168.75px。亲本的高度为200/2，因此.img_container (ic/2 = 100)和img (img/2 = 84.375)的一半高度之间的差值为15.625/2。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38934114

复制

相似问题

问将元素置于对象匹配之上:包含的图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将元素置于对象匹配之上:包含的图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将元素置于对象匹配之上:包含的图像
EN