web-dev-qa-db-fra.com

Comment redimensionner la balise img appropriée?

Je veux montrer une image dans de petites fenêtres mais je dois économiser sur le rapport de l'image (je veux toujours que les gens sachent ce que c'est). Par exemple, disons que l'image fait 1000X200 pixels, et il y a un div qui se définit comme suit: height: 100px; largeur: 100px; Je veux donc que l'image soit écrite comme ça:

<img src="asd.jpg" height=20 width=100 />

et pas

<img src="asd.jpg" height=100 width=100 />

ou pas

<img src="asd.jpg"/>

et puis il y a des parchemins ..

Je peux travailler avec des pourcentages, mais comment puis-je le faire .. (et cela fonctionne-t-il même avec des pourcentages seuls?)

htmlcssimageresize
17
Nir

Si vous définissez max-height et max-width en CSS, les navigateurs modernes la restreindront à cette taille mais garderont le rapport d'aspect correct:

<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />
41
David Fullerton

Si votre parent div a un ensemble width et height, vous pouvez définir la largeur maximale et la hauteur maximale de img sur 100%:

div {
  width: 100px;
  height: 100px;
}
div > img {
  max-width: 100%;
  max-height: 100%;
}

(C'est toujours une bonne pratique de donner aux images une largeur maximale de 100%, pour les navigateurs mobiles, etc.)

5
Rudie

Si vous utilisez javascript, vous pouvez simplement obtenir la hauteur et la largeur de l'image et les diviser l'une par l'autre pour obtenir un rapport, puis multiplier la hauteur et la largeur du div par rapport à ce rapport, puis définir les dimensions img sur ces nombres.

Évidemment, c'est une façon très simpliste de le dire, mais je ne sais pas non plus si vous voulez le faire avec JS ou utiliser une solution strictement CSS.

1
Munzilla