J'ai trouvé ce fil - Comment étirer une image pour remplir une <div> tout en conservant le rapport hauteur / largeur de l'image? - ce n'est pas tout à fait ce que je veux.
J'ai un div avec une certaine taille et une image à l'intérieur. je veux toujours remplir le div avec l'image, que l'image soit en mode paysage ou portrait. Et peu importe si l'image est coupée (le div lui-même a le débordement caché).
Donc, si l'image est portrait, je veux width
qu'elle soit 100%
et height:auto
ainsi elle reste proportionnée. Si l'image est en paysage, je veux height
qu'elle soit 100%
et que l' width to be
auto`. Cela semble compliqué, non?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Comme je ne sais pas comment faire, j'ai simplement créé une image rapide de ce que je veux dire. Je ne peux même pas le décrire correctement.
Donc, je suppose que je ne suis pas le premier à poser cette question. Cependant, je n'ai pas vraiment trouvé de solution à cela. Il y a peut-être une nouvelle façon CSS3 de faire cela - je pense à flex-box. Une idée? Peut-être que c'est encore plus facile que ce à quoi je m'attendais?