J'ai trouvé ce fil - Comment étirer une image pour remplir une <div> tout en conservant le rapport d'aspect 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 format paysage ou portrait. Et cela n'a pas d'importance si l'image est coupée (la div elle-même a un overflow caché).
Ainsi, si l'image est un portrait, je veux que le width
à être 100%
et le height:auto
pour qu'il reste en proportion. Si l'image est un paysage, je veux que le height
à être 100%
et le 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 à demander ça. Cependant, je n'ai pas vraiment trouvé de solution à ce problème. Peut-être existe-t-il un nouveau moyen CSS3 de le faire - je pense à flex-box. Avez-vous une idée ? Peut-être est-ce encore plus facile que je ne le pense ?