Evitar que una imagen colapse un DIV
Cuando tenemos un DIV con un ancho fijo y dentro de él colocamos una imagen que supera las dimensiones del DIV que la contiene, lo que sucede es que la imagen en cuestión colapsa y se sale de su elemento contenedor.
Usando la propiedad max-width lo que se logra es que la imagen no sobrepase un ancho prefijado y de esta manera que no colapse.
Ejemplo (con un div con borde verde):
la imagen desborda el div
imagen contenida dentro del div
Para empezar construimos un simple código HTML que nos va a servir para colocar el div junto a su imagen (usen una imagen de tamaño grande para notar mejor el resultado)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="a"> <img src="imagen.jpg" alt="imagen de prueba" /> </div> </body> </html> |
Ahora si abren el archivo HTML en el navegador verían algo parecido a la primer imagen de arriba, es decir, la imagen en su tamaño completo colapsando al div contenedor. Lo que no verían sería el borde del div ya que hasta ahora no agregamos código CSS. Por eso lo siguiente es hacer el archivo style.css como sigue:
1 2 3 4 5 6 7 8 9 | #a{ width: 400px; border: 4px dotted #0f0; } #a img{ max-width: 400px; height: auto; } |
Y acá lo importante es como está usada la propiedad max-width, que como el nombre indica, le dice a la imagen el ancho máximo que puede tener, y también agregué la propiedad height: auto porque si a nuestra imagen en el HTML la declaramos con alto y ancho, entonces el max-width modificaría solamente el ancho pero como le damos height: auto entonces modificaríamos también el alto, para que no pierda su proporción inicial la imagen.
).
