Entradas de Julio de 2007
18/7 - 2007 ayerviernes - css - xhtml
Imágenes en porcentaje
Una buena opción a la hora de diseñar para blogs o sitios con un contenido dinámico, es utilizar imágenes con tamaños fluidos, en porcentaje, para que se comporten en relación a su contenedor padre.
Por ejemplo, el típico problema para los editores de blog es utilizar imágenes de un máximo de ancho, para que así no desestructuren las cajas de contenido. A través de este método, es posible dar una solución a esta complicación, ajustando el width de la imagen con porcentajes, en relación a su contenedor padre.
HTML <body> <div id="contenedor"> <h1>Contenedor de la imagen</h1> <img src="ejemplo.jpg" alt="Flor. Ejemplo de imagen en porcentaje" title="Flor. Ejemplo de imagen en porcentaje" /> </div> <body>
CSS
#contenedor{
width: 100%;
height: 50%;
}
img{
width: 94%;
margin: 2% 3% 3% 3%;
}
