Comment faire img coller au fond tout en augmentant pour remplir le parent?

Question

Je souhaite que l'image reste collée en bas tout en effectuant une mise à l'échelle pour remplir son parent et conserver son format.

Je sais comment le faire avec une image de fond mais je veux que ce soit un <img>. La taille du parent est inconnue.

Existe-t-il un moyen de le faire sans JavaScript?

L'extrait montre ce que je veux.

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

Il suffit d'utiliser object-position avec 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>