Son muchos los que utilizan alguna clase de plantilla o tiene un sitio donde las entradas del home se muestran resumidas, adornadas con una imagen. También son muchos los que preguntan ¿cómo puedo hacer para que esas imágenes no se deformen?
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, cosa que podemos hacer con width y height tanto en el CSS como con atributos en la misma etiqueta, la imagen se mostrará con esa dimensión; como una es más alta que ancha, el pobre patito "engordará".
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, cosa que podemos hacer con width y height tanto en el CSS como con atributos en la misma etiqueta, la imagen se mostrará con esa dimensión; como una es más alta que ancha, el pobre patito "engordará".
¿Qué pasa en los resúmenes? Imaginemos algo así:
<div class="demoresumen">
<div>
<img src="una_imagen"/>
<p> ... un texto ... </p>
</div>
<!-- etc etc etc -->
<div>
<img src="una_imagen"/>
<p> ... un texto ... </p>
</div>
</div>
Con este estilo:
<style>
.demoresumen {margin: 0 auto; overflow: hidden; width: 480px;}
.demoresumen div {border: 1px solid #444; float: left; height: 240px; margin: 5px; width: 225px;}
.demoresumen p {font-size: 11px; margin: 0; padding: 10px;}
.demoresumen img {display: block; height: 160px; margin: 10px auto 0; width: 200px;}
</style>
Veríamos algo así:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Para que una imagen se re-dimensione sin perder sus proporciones debemos establecer una y solo una de las dimensiones, dejando que la otra sea calculada por el navegador; en este caso, basta con eliminar height o colocar height: auto; pero, obviamente, con este método, toda la estructura se desquicia ya que habrá rectángulos mas altos que otros y si estamos dimensionando la altura del contenedor y usando overflow:hidden, se cortará.
height: auto | overflow:hidden | restaurar
¿Podemos hacer que la imagen del pato se muestre sin deformarse? Si pero no. Una forma de hacerlo es colocarla dentro de un contenedor, dimesionarlo y usar overflow; es decir, "cortar" lo que sobre; en lugar de:
<img src="una_imagen"/>
pondríamos algo así:
<span><img src="una_imagen"/></span>
y cambiaríamos las reglas de estilo:
.demoresumen span {display: block;height: 160px;margin: 10px auto 0;overflow: hidden;width: 200px;}
.demoresumen img {width: 200px;}Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Tampoco resuelve demasiado.
Si estamos buscando opciones sencillas, lo ideal es que las imágenes que vamos a utilizar mantengan siempre una proporción adecuada y listo; ese tipo de plantilla ha sido pensada para eso; caso contrario, deberíamos olvidarnos de lo que tenemos y pasar a alguna estructura de mosaico usando CSS3 lo que impedirá que se muestre correctamente en ciertos navegadores o agregando algún script que maneje ese tipo de solución.
Una alternativa intermedia es usar un poco de CSS que no resolverá el problema pero mitigará los efectos. Para esto, debemos olvidarnos de la etiqueta IMG y colocar la imagen como fondo. Otra vez, en lugar de:
Si estamos buscando opciones sencillas, lo ideal es que las imágenes que vamos a utilizar mantengan siempre una proporción adecuada y listo; ese tipo de plantilla ha sido pensada para eso; caso contrario, deberíamos olvidarnos de lo que tenemos y pasar a alguna estructura de mosaico usando CSS3 lo que impedirá que se muestre correctamente en ciertos navegadores o agregando algún script que maneje ese tipo de solución.
Una alternativa intermedia es usar un poco de CSS que no resolverá el problema pero mitigará los efectos. Para esto, debemos olvidarnos de la etiqueta IMG y colocar la imagen como fondo. Otra vez, en lugar de:
<img src="una_imagen"/>
pondríamos algo así:
<span style="background-image:url(una_imagen)"></span>
Y es esa etiqueta con la imagen de fondo la que podemos manipular un poco mediante las propiedades background; por ejemplo:
.demoresumen span {
display: block;
height: 160px;
margin: 10px auto 0;
width: 200px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
La imagen se cortará pero, podemos establecer donde; en el ejemplo, eso se hace con background-position y los valores 50% 50% indican que se coloque en el medio pero puede ser cualquier otro valor.
La otra propiedad que podemos usar es background-size aunque esta, sólo se aplicará en navegadores modernos y, básicamente, tiene tres valores:
La otra propiedad que podemos usar es background-size aunque esta, sólo se aplicará en navegadores modernos y, básicamente, tiene tres valores:
background-size: contain | background-size: cover | background-size: auto
En resumen, no hay soluciones perfectas y por eso comencé diciendo que la respuesta a la pregunta es no, no se puede porque es imposible mantener las proporciones de una imagen si lo que estamos haciendo es cambiando esas proporciones. El problema, termina siendo una contradicción en si misma.
