Mantener la relación de aspecto con el ancho de la imagen en css

Question

¿Hay alguna forma de corregir la relación de aspecto de las imágenes con un ancho menor usando css? Tal vez mediante el uso de jQuery/javascript?

Gracias!

Answer 1

Con CSS normal, podría configurar una sola dimensión de las imágenes, ya sea width o height y configure el otro como auto, por ejemplo:

.thumb { 
    width:200px; 
    height:auto; 
} 

Las imágenes tendrán un ancho fijo 200 píxeles, y la altura dependerá de la relación de aspecto.

Answer 2

Aquí está la solución de jQuery;)

function fixImage(elm) { 
      elm = $(elm); 
      var x = elm[0]; 

      var allowedHeight = 80; 
      var allowedWidth = 80; 
      if (width > height) { 
       elm.css('width', allowedWidth + 'px'); 
       elm.css('height', 'auto'); 
      } 
      else { 

       elm.css('height', allowedHeight + 'px'); 
       elm.css('width', 'auto'); 

      } 
}