Redimensionar con CSS manteniendo la proporción

Publicado por Alejandro Escario en

Algunos blogs y foros de hoy en día, tienen problemas con las imágenes grandes que se publican en sus artículos y comentarios, debido a que en ocasiones el tamaño de éstas  es demasiado grande lo que causa una deformación en el skin que están usando, y por consigueinte incomodando la lectura de la página para sus visitantes.

Dicho problema se soluciona en algunos sitios usando scripts php o JavaScript, pero estos métodos requieren un poco más de conocimiento para implementarlos bien, sin embargo hay una forma muy sencilla de hacer esto con CSS.

Para empezar deberíamos tener una estructura HTML similar a esta:

<div id="post">
	texto con o sin la imagen
</div>

Ahora lo único necesario para realizar el redimensionado es escribir en nuestro *.css lo siguiente:

#post img{
  max-width: 600px;
  height: auto;
}

Siendo max-width: el ancho máximo que queremos que tenga la imagen.  Si lo que deseamos es establecer la altura máxima en lugar del ancho bastaríacambiar la palabra height por width y viceversa.

Categorías: ManualesProducción propia

3 comentarios

Judith V. · febrero 4, 2009 a las 1:09 am

😛 Utilisimo 😀 lo estoy aplicando en mi foro wiiii :D:D:D

tetradog · mayo 28, 2012 a las 3:34 pm

muchísimas gracias me ha ido muy bien ya que la autoredimension de imagenes de foroactivo…es un rollo y va muy mal…y esto en cambio mola porque tu eres el que elige que imagenes quieres redimensionar de tal a tal imagen 😉 jeje mola 😉 te doy un 10 !!! good job!

Redimensionar con CSS manteniendo la proporción | PHP-Blog.com · febrero 1, 2009 a las 7:14 pm

[…] the original: Redimensionar con CSS manteniendo la proporción Related ArticlesBookmarksTags RinkAtlas Restored After Another Server Crash It takes a bit […]

Los comentarios están cerrados.