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

Question

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

我知道如何使用背景图像来实现，但我希望它是 <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>

Answer 1

只需使用 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>