Como redimensionar una imagen proporcionalmente con css y no morir en el intento

Quizás alguno de nosotros en determinado momento, se nos haya ocurrido redimensionar automáticamente una imagen para un uso concreto.

Por ejemplo, cuando escribimos un post y nuestro ancho máximo es de 650px pero nuestra imagen es de 700px, lo que podemos hacer en nuestro CSS, es ordenar que el ancho máximo de nuestra imagen sea de 650px, el problema con esto es que nuestra imagen quedará comprimida pero solamente horizontalmente.

Asignándole a la imagen un max-width, lo que haremos solamente es redimensionarla horizontalmente, de esta manera la imagen se verá desproporcionada como vemos en el ejemplo:

¿CÓMO REDIMENSIONO LA IMAGEN PROPORCIONALMENTE?

Solamente agregando un pequeño código en CSS podremos obtener un resultado prolijo para presentar nuestras imágenes.

Únicamente con agregar height: auto; ya lograremos que nuestra imagen sea redimensionada proporcionalmente.

¿Cómo adaptar una imagen para un diseño responsive?

Para hacer imágenes responsive solamente tenemos que modificar el atributo max-width.

Modificado por última vez el día 10 de diciembre de 2012 a las 09:38
Scroll to top