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 Comments
  • Dic 4,2015 at 3:52

    Gracias muchas gracias ojo deben seguir la linea del codigo

    css:
    #slider .contenedor{
    padding:2px;
    }
    #slider .contenedor img {
    max-width: 99%;
    }

  • Carlos Fidias
    May 23,2015 at 15:25

    existe alguna forma de redimencionar no solo el ancho si no tambien el largo heigth

  • Abr 5,2012 at 6:50

    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

    • wsoulrc
      Abr 5,2012 at 8:24

      hola, es automatico.

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

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

  • Abr 4,2012 at 15:47

    Muchas gracias una vez más, la verdad es que es bastante útil y necesario.

Leave a Comment