¿Cómo cambiar el tamaño de la etiqueta de img adecuada?

Question

Quiero mostrar una imagen en ventanas pequeñas, pero necesito guardar la proporción de la imagen (aún quiero que las personas puedan saber de qué se trata). Por ejemplo, digamos que la imagen es 1000X200 píxeles, y hay un div que se define como: altura: 100 px; ancho: 100 px; así que quiero que la voluntad imagen escribió así:

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

y no

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

o no

<img src="asd.jpg"/> 

y luego hay rollos ..

puedo trabajar con porcentajes, pero ¿cómo lo hago ... (e incluso funciona con porcentajes solo?)

Answer 1

Si establece max-height y max-width en CSS, los navegadores modernos restringirlo a ese tamaño, pero mantener la relación de aspecto correcta:

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

Answer 2

Si utiliza JavaScript, se puede conseguir simplemente la altura y la anchura de la imagen y dividir uno por el otro para obtener una relación, luego multiplicar la altura y el ancho del div contra esa relación, luego establecer las dimensiones img a esos números.

Obviamente, es una forma muy simplista de decirlo, pero tampoco estoy seguro de si desea hacer esto con JS o utilizar una solución estrictamente CSS.

Answer 3

Si su padre div tiene un conjunto width y height, podría configurar el max-width y max-altura de la img-100%:

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

(Siempre es una buena práctica para dar imágenes Max- ancho del 100%, para navegadores móviles, etc.)