如何在放大以填充父级时使 img 粘在底部？

debugcn 发表于 Dev

纽克莱斯

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

我知道如何用背景图片来做，但我希望它是一个<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>

cyr_x

只需object-position与object-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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。