Comment redimensionner l'étiquette img appropriée?

Je veux montrer une image en petit de windows, mais j'ai besoin d'économiser sur le ratio de l'image(j'ai encore envie que les gens puissent savoir ce que c'est).
Par exemple permet de dire que l'image est 1000X200 pixels, et il y a un div qui défini comme:
hauteur: 100px;
width: 100px;
Donc, je veux que l'image s'écrit 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 il le fait même de travailler avec des pourcentages seul?)

source d'informationauteur Nir

  1. 31

    Si vous définissez max-height et max-width dans le CSS, les navigateurs modernes va restreindre à cette taille, mais de garder le ratio d'aspect correct:

    <img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />
  2. 4

    Si votre parent div a un ensemble width et heightvous pouvez définir le max-width et max-hauteur de la img à 100%:

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

    (C'est toujours une bonne pratique de donner des images max-width de 100%, pour les navigateurs mobiles, etc.)

  3. 1

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

    Évidemment, c'est une manière simpliste de dire ça, mais je ne suis pas sûr si vous voulez le faire avec JS ou utiliser un strict CSS solution.