Redimensionar imágenes con css

Bueno, mucha gente tiene este problema en sus páginas / foros y lo solucionan muchas veces re-imensionando la imagen en js/php y muchas veces hacen la carga de la página mas lenta aun que haciéndolo con css.

Lo idóneo sería comprobar si la imagen supera xxxx tamaño y si lo hace, hacerlo con js/php y si no con css, por que muchas veces, lo redimensionamos para que no moleste a la hora de verlo, pero si la imagen ocupa poco, da igual que cargue con ese tamaño.

Para hacerlo solamente necesitamos un atributo de css, que es max-width. podemos usarlo en todas las imagenes y definirlo por % o por px. Si lo ponemos dentro de un div con tamaño 800 por ejemplo, y ponemos a la imagen max-width 700, si ocupa mas, la imagen se mostrara con 700 de ancho.

[cc lang=”css”]

#div {
width: 300px;
margin: 0 auto 0 auto;
padding: 5px;
background-color: #000000;
color: #fff;
}
#div img { max-width: 99%; }

[/cc]

Ver demo

5 comentarios en “Redimensionar imágenes con css

  1. Muchas gracias por el aporte, me gustaría preguntarte como implementas esto, yo tengo un blog de 470 px de ancho en la sección de las entradas y a veces me cuesta redimensionar el tamaño de las imágenes, ya que se poco de todo esto.
    Me gustaría saber si esta redimensión es automática o la debes hacer manualmente con cada imagen, eso es lo que no entendí.
    Muchas gracias

    1. hola, es automatico.

      pongamos que el div de tus entradas es #contenedor con width 470xp

      con pone #contenedor img { max-width: 99%; } ya funcioanra

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *