gpt4 book ai didi

html - 如何在放大以填充父级时使图像粘在底部?

转载 作者:行者123 更新时间:2023-11-28 17:09:41 25 4
gpt4 key购买 nike

我想让图像贴在底部,同时放大以填充其父级并保持其纵横比。

我知道如何使用背景图像来实现,但我希望它是 <img> .父级的大小未知。

有没有不用 JavaScript 的方法?

该片段显示了我想要的。

div {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div>
<img src="http://via.placeholder.com/25x50" alt="">
</div>
<div>
<img src="http://via.placeholder.com/50x25" alt="">
</div>
What I want:
<div style="background-image: url(http://via.placeholder.com/25x50)">
</div>
<div style="background-image: url(http://via.placeholder.com/50x25)">
</div>

最佳答案

只需使用 object-positionobject-fit 一起:

div {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
<div>
<img src="http://via.placeholder.com/25x50" alt="">
</div>
<div>
<img src="http://via.placeholder.com/50x25" alt="">
</div>
What I want:
<div style="background-image: url(http://via.placeholder.com/25x50)">
</div>
<div style="background-image: url(http://via.placeholder.com/50x25)">
</div>

关于html - 如何在放大以填充父级时使图像粘在底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46859509/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com