« | »
Feb'09
1

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.

Si disfrutaste del artículo, puedes suscríbete a nuestro feed RSS
Etiqueta(s):
Categoría(s): Manuales, Producción propia
Si te gustó este artículo o bien deseas seguirnos diariamente tal vez desees suscribirte a nuestro canal RSS vía email o bien vía lector de feeds. Recuerda que si usas tu email debes verificar la activación de tu suscripción (si tarda mucho revisa en tu carpeta spam).
Puedes dejar un comentario, o hacer un Trackback desde tu sitio.

3 comentarios en “Redimensionar con CSS manteniendo la proporción”

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

  2. Judith V. says:

    :P Utilisimo :D lo estoy aplicando en mi foro wiiii :D:D:D

  3. tetradog says:

    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!

Deje su comentario

XHTML: Puedes utilizar algunos códigos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

« | »