Imágenes que fluyen

Si ajustan su navegador a diferentes tamaños verán que en la página principal de DIT (dit.mx) la imagen que dice “En DIT desarrollamos ideas & creamos soluciones” va ajustando su tamaño. Esto es súper fácil de lograr, todo lo que tenemos que hacer es declarar lo siguiente en nuestro archivo .css:

img {<br />
max-width:100%;<br />
height: auto; /* Esto para que la altura corresponda al ancho y no se deforme la imagen. */<br />
}<br />

Si, así de fácil. Y casi oigo que alguien pregunta: ¿Funciona en IE6? Pues claro que no, pero aquí un buen truquito que podríamos declarar en una hoja de estilos solo para IE6:

img {<br />
width:100%;<br />
}<br />

Inténtenlo, a mí me ha funcionado de maravilla.

2 comentarios