209 votes

Comment puis-je remplir un div avec une image tout en gardant la proportionnalité ?

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.

enter image description here

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 ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X