Category : Programación

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

read more
1 14 15 16