如何在缩放以填充父级时使img坚持到底部？

Question

我希望将图像粘贴到底部，同时放大以填充其父级并保持其宽高比。

我知道如何使用背景图片，但我希望它是<img>。 父母的身份未知。

有没有办法在没有JavaScript的情况下做到这一点？

该片段显示了我想要的内容。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将object-position与+----------++----------+ | object A || object B | +----------++----------+ 一起使用：

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;
}