Imágenes que se estiran

04-12-2007

Una de las cosas agradables de programar usando diseños flexibles es que las cosas se ajustan al tamaño de la ventana del usuario, independientemente de la resolución de su monitor. Pero a veces las imágenes dan problemas… De Robertobaca.Net

Las imágenes suelen tener una sola resolución y si tienes una imagen que debe ocupar 200 pixeles en tu encabezado de 800 pixeles para que se vea bien y no rompa el diseño puede ser difícil hacer un diseño flexible que se ajuste.

Por lo general nuestro código se verá así:

<div id='encabezado' style='width: 100%;'>
<img src='imagen' align='left' width='200' />
Bienvenidos a mi sitio
</div>

Y eso puede funcionar bien a cierta resolución, pero si hacemos la pantalla más chica o más grande, la imagen ocupará un área mayor o menor de la que queremos. Pero hay una manera de solucionarlo:

<div id='encabezado' style='width: 100%;'>
<div id='imagen' style='width: 25%; float: left;'>
<img src='imagen' style='width: 100%;' />
</div>
Bienvenidos a mi sitio
</div>

Como ves, he puesto la imagen dentro de otro div que tiene un ancho de 25% flotado a la izquierda y la imagen tiene un ancho de 100%, y el 100% de 25% es 25%.

Patos

Claro, para mejores resultados ocupa una imagen cuya resolución original sea lo bastante grande para verse bien incluso en tamaños grandes. Sin exagerar para que no sea demasiado pesada.

Roberto Baca

Escribo cosas de vez en cuando