Fit plusieurs images de différentes tailles dans une rangée de largeur fixe et d'ajuster la hauteur

Question

Considérons 3 images (ou plus), tous de tailles différentes et des rapports d'aspect dans une div de largeur fixe (par exemple width:100%):

<div class="image-row"> 
    <img src="1.png"> 
    <img src="2.png"> 
    <img src="3.png"> 
</div> 

Comment pouvez-vous forcer toutes les images à avoir la même hauteur et leur largeur totale pour remplir la largeur du conteneur (c'est-à-dire comment faire une rangée nette d'images)?

J'ai essayé différentes combinaisons de flex ou inline-block ou de nowrap pour fonctionner correctement avec height:100% ou object-fit, mais rien ne semble fonctionner. Je perds le rapport d'aspect, je coupe des parties de l'image ou je n'ai pas la même hauteur. Dans "pseudocode anglais", la procédure est simple: redimensionnez-la séparément à une hauteur unitaire, puis redimensionnez en tant que groupe à une largeur donnée, tout en conservant les proportions. Existe-t-il une étape particulière dont CSS n'est pas capable?

Answer 1

Je pense que le réglage des images comme images de fond pourrait aider. De cette façon, vous pouvez avoir des images de différentes tailles remplissant la même largeur/hauteur div en utilisant le background-size:cover. Je ne crois pas qu'il soit possible d'avoir toutes les images à la même hauteur sans couper les parties si les proportions sont différentes pour chaque image. Vous pouvez également essayer d'ajuster le background-position de chaque image pour au moins centrer votre image dans la div ou essayer d'éditer/recadrer les photos avant d'avoir le même rapport d'aspect. Sinon, vous devrez faire des compromis.

img { 
 
    width: 33%; 
 
    height: 150px; 
 
} 
 

 
.content { 
 
    width: 33%; 
 
    display:inline-block; 
 
    height:150px; 
 
} 
 

 
#left { 
 
    background-image: url("https://i.ytimg.com/vi/tYBk4kLHPkk/maxresdefault.jpg"); 
 
    background-size:cover; 
 
    
 
} 
 

 
#center { 
 
    background-image: url("https://i.pinimg.com/736x/18/f1/a7/18f1a75691c28433c0f1ef502573966b--tv-memes-office-gifs.jpg"); 
 
    background-size:cover; 
 
} 
 

 
#right { 
 
    background-image: url("https://s-media-cache-ak0.pinimg.com/736x/bf/73/19/bf73196327b409d12c214e9994de369e--graduation-caps-grad-cap.jpg"); 
 
    background-size:cover; 
 
}

<div class="image-row"> 
 
    <div id = "left" class="content"> 
 
    </div> 
 
    <div id = "center" class="content"> 
 
    </div> 
 
    <div id = "right" class="content"> 
 
    </div> 
 
</div>