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á".
![](https://lh6.googleusercontent.com/-wPwer377xtg/UGtmzsk4hOI/AAAAAAAACeQ/GAb8oKzd2cA/s200/10_0266.jpg)
![](https://lh6.googleusercontent.com/-ZBY3Rf2j3l8/UGtoT7NnuEI/AAAAAAAACis/9WQFXRvFOi8/s200/14_0090.jpg)
![](https://lh6.googleusercontent.com/-wPwer377xtg/UGtmzsk4hOI/AAAAAAAACeQ/GAb8oKzd2cA/s200/10_0266.jpg)
![](https://lh6.googleusercontent.com/-ZBY3Rf2j3l8/UGtoT7NnuEI/AAAAAAAACis/9WQFXRvFOi8/s200/14_0090.jpg)
<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>
<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>
![](https://lh6.googleusercontent.com/-wPwer377xtg/UGtmzsk4hOI/AAAAAAAACeQ/GAb8oKzd2cA/s200/10_0266.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
![](https://lh6.googleusercontent.com/-ZBY3Rf2j3l8/UGtoT7NnuEI/AAAAAAAACis/9WQFXRvFOi8/s200/14_0090.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
![](https://lh6.googleusercontent.com/-ZBY3Rf2j3l8/UGtoT7NnuEI/AAAAAAAACis/9WQFXRvFOi8/s200/14_0090.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
![](https://lh6.googleusercontent.com/-wPwer377xtg/UGtmzsk4hOI/AAAAAAAACeQ/GAb8oKzd2cA/s200/10_0266.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
<img src="una_imagen"/>
<span><img src="una_imagen"/></span>
.demoresumen span {display: block;height: 160px;margin: 10px auto 0;overflow: hidden;width: 200px;} .demoresumen img {width: 200px;}
![](https://lh6.googleusercontent.com/-wPwer377xtg/UGtmzsk4hOI/AAAAAAAACeQ/GAb8oKzd2cA/s200/10_0266.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
![](https://lh6.googleusercontent.com/-ZBY3Rf2j3l8/UGtoT7NnuEI/AAAAAAAACis/9WQFXRvFOi8/s200/14_0090.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
![](https://lh6.googleusercontent.com/-ZBY3Rf2j3l8/UGtoT7NnuEI/AAAAAAAACis/9WQFXRvFOi8/s200/14_0090.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
![](https://lh6.googleusercontent.com/-wPwer377xtg/UGtmzsk4hOI/AAAAAAAACeQ/GAb8oKzd2cA/s200/10_0266.jpg)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...
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"/>
<span style="background-image:url(una_imagen)"></span>
.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 otra propiedad que podemos usar es background-size aunque esta, sólo se aplicará en navegadores modernos y, básicamente, tiene tres valores:
10 comentarios:
Que buena entrada maestro, dele fuerte y siga con estos temas :)
:D
Me quedo con background-size: auto, gracias eso me ayudara a ke algunas imagenes en mis resumenes no se vean tan gordas :P
Eso es agusto del consumidor :D
ThumbsUp! jmiur
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!
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.
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!
El estilo puede ser exactamente el mismo que ahora tienes, sólo debe armarse el CSS correcto.
Magistral entrada como no podría ser de otra manera proveniente de un maestro.
Gracias.
¿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 ...