如何将img贴到底部，同时向上扩展以填充父项？

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-fit一起使用object-position：

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>