JMiur [E]

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á".



¿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:
<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:

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.

10 comentarios:

Gem@  

Que buena entrada maestro, dele fuerte y siga con estos temas :)

JMiur  

:D

Responder
Rosendo Ramírez  

Me quedo con background-size: auto, gracias eso me ayudara a ke algunas imagenes en mis resumenes no se vean tan gordas :P

JMiur  

Eso es agusto del consumidor :D

Responder
Unknown  

ThumbsUp! jmiur

Responder
Mario  

Muy buena entrada maestro! Yo el problema que tengo con los resúmenes no es las imágenes. Mi verdadero problema es el estilo de los resúmenes. Es decir, cómo hacer para que las negritas, enlaces, cursivas, etc. se vean en los resúmenes, siempre se pierden los estilos. ¿Hay alguna forma de conseguiro? Gracias!

JMiur  

Por lo general, los scripts que generan resúmenes, toman el contenido y eliminan las etiquetas HTML que son las que se requieren para mostrar un formato y sólo toman el texto plano.

Hacerlo de otro modo es sumamente complejo ya que es muy difícil resumir automáticamente un código con etiquetas ya que se debería evaluar cada etiqueta para evitar que esta sean cortadas porque si ocurriera eso, el resultado final podría ser catastrófico ya que el sitio se vería de modo incorrecto.

Si quieres que el resumen tenga formato, no puedes usar un script para resumir las entradas sino que debes utilizar el MORE de Blogger para indicar donde se debe cortar y qué se debe mostrar.

Mario  

Gracias por la respuesta!! El "more" no queda tan vistoso, a no ser que me curre estilos para el mismo, pero es una buena opción!

JMiur  

El estilo puede ser exactamente el mismo que ahora tienes, sólo debe armarse el CSS correcto.

Responder
Adrián J. Messina  

Magistral entrada como no podría ser de otra manera proveniente de un maestro.

Gracias.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR