vagacode

¿Cómo hacer que las imágenes no se deformen cuando se aplican a contenedores de dimensiones variables? La respuesta a eso es sencilla y no le gusta a nadie: no se puede.

No se puede porque si usamos etiquetas img y las re-dimensionamos con width y height ya sea que lo apliquemos a un estilo CSS o a un atributo en la misma etiqueta, la imagen se mostrará con esa dimensión, más alta que ancha o al reves, a menos que esos valores sean proporcionales a la dimesnión original.

Una posibilidad intermedia para que no pierda sus proporciones es establecer una y solo una de las dimensiones dejando que la otra sea calculada por el navegador o colocarle un valor de auto.

Otra alternativa que no resolverá el problema por completo pero mitigará los efectos es olvidarnos de la etiqueta img y colocar la imagen como fondo, algo que está contemplado en el CSS3 con la creación de la propiedad background-size que nos permite establecer la dimensión de la imagen a usar como fondo y admite dos valores, el ancho y el alto, tanto en pixeles como en porcentajes o palabras claves como auto, contain y cover que establecen la relación ancho/alto que debe mantenerse.

Supongamos una imagen de 340x540 pixeles que aplicaremos como fondo a un contenedor al que le daremos una dimensión de 250x300. Agregado el estilo, podríamos tener este código:

.demo {
	background: transparent url(http://i.imgur.com/YiwOH0z.jpg) no-repeat 50% 50%;
	height: 300px;
	outline:1px solid #ccc;
	width:250px;
}

Como la imagen de fondo es grande, se verá cortada; si por el contrario, la imagen en más pequeña, no alcanzará a cubrir el contenedor:

Ahora le agregaremos la propiedad background-size con distintos valores tanto para el ancho como para el alto:

La imagen se expandirá hasta ocupar el 100% ya sea del ancho, del alto o de ambas dimensiones.

¿Y que hacen contain y cover?

Algo parecido pero el resultado será levemente distinto, si usamos cover la imagen se expandirá ocupando todo el contenedor (deformando la imagen), si usamos contain lo ocupará todo el alto o el ancho (dependiendo de las proporciones) y la imagen no se deformará:

En resumen, no hay soluciones perfectas y por eso comencé diciendo que es imposible mantener las proporciones de una imagen si lo que hacemos es cambiar esas proporciones. El problema, termina siendo una contradicción en si misma.

Entonces ¿cuál es la utilidad de background-size? Como todo, eso depende de lo que se quiera hacer y de cómo se hace. Lo elemental es permitir que el fondo se acomode sin importar la dimensión de su contenedor pero es obvio que eso, sólo funcionará sin problemas si ese contenedor y la imagen inicial tienen la misma proporción ancho/alto.