<html>
<head>
<title>[Prueba - CSS]</title>
<style type="text/css">
<!--
#a{
width: 300px;
border: 5px dotted #00f;
}
-->
</style>
</head>
<body>
<div id="a">
<img src="home.jpg" alt="imagen de prueba" />
</div>
</body>
</html>
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.
<style type="text/css">
<!--
#a{
width: 300px;
border: 5px dotted #00f;
}
#a img{
max-width: 300px;
height: auto;
}
-->
</style>
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 para que no pierda su proporción y no se vea distorsionada.
0 comentarios:
Publicar un comentario