Rend l'image plus petite et préserve les proportions?

Question

J'ai une colonne de table où j'ai cette image affichée:

<table width="200px" height="300px" align="center"> 
    <tr> 
    <td><img src="...."></td> 
    </tr> 
</table> 

La source d'image est dynamique, de sorte que l'image ne soit pas toujours la même taille ...

Cela signifie que je dois (en la plupart des cas) redimensionner l'image pour devenir plus petite qu'elle ne l'est.

Comment puis-je faire cela tout en préservant les proportions, de la manière la plus simple?

Merci

Answer 1

Il suffit de définir un width.

<img src="..." style="width: 200px"> 

les proportions seront conservées automatiquement si vous spécifiez une seule dimension.

Answer 2

Aspect ratio devrait être preserved si vous spécifiez soit un width ou un height, mais pas les deux, dans le style de votre élément <img>:

Si la taille spécifiée est juste une largeur définie ou juste une certaine hauteur , puis la zone de visualisation CSS doit avoir la même largeur ou hauteur, comme approprié. L'autre dimension est calculée comme suit:

1. Si l'objet a un rapport d'aspect intrinsèque, la CSS Voir Box doit avoir le même rapport d'aspect.

Answer 3

Put id = "ImageID" dans l'onglet img et appeler le javascript suivant:

var elem = document.getElementById('imageID'); 
    if (elem == undefined || elem == null) return false; 
    if (max == undefined) max = 100; 
    if (elem.width > elem.height) { 
    if (elem.width > max) elem.width = max; 
    } else { 
    if (elem.height > max) elem.height = max; 
    } 

Answer 4

Avez-vous essayé le% au lieu de la largeur/hauteur px-à-dire.

<img src="..." style="width: 90%">