Cargar Imágenes Según La Resoloción

[southern]

Buenas, acabo de terminar de "maquetar" un diseño que tenía en mente, siendo este líquido. Es decir, los divs los posiciono usando position: absolute; y posicionándolos y especificando sus dimensiones mediante porcentajes. Hago con esto con la finalidad de que se muestre bien con independencia de la resolución de pantalla del visitante.

El problema es que quiero mostrar imágenes dentro de los divs, pero no sé cómo hacer que esas imágenes se muestren con las dimensiones apropiadas en relación a la resolución de pantalla del visitante.

¿Alguien me podría aclarar un poco cómo funciona este tema? Con que me orienten un poco sobre qué tengo que investigar me conformo :)

Muchas gracias de antemano !

[memoadian]

a las imagenes se le puede poner una resolucion en porcentajes, claro que pueden deformarse o cosas asi ya te tocara trastearle.

Código CSS:

.resize{
    width:20%;
}
 

Código HTML:

<img src="imagen.jpg" class="resize"/>
 

aunque si es una imagen de fondo, puedes usar los clasicos trucos de que la imagen se repita hasta el infinito en y o en x. o bien un difuminado con color de fondo.

[Tedel]

Usa width y max-width para tus imágenes. Eso lo resuelve.

[southern]

Muchas gracias por aclararme un poco este tema, estoy cogiendo soltura en este aspecto gracias a la información que me dieron.

Me surgió una pequeña duda respecto a las imágenes verticales, pero se puede usar de igual manera height y max-height, si bien no es recomendable mezclar width y height a la vez que max-width y max-height según tengo entendido.

De todos modos aquí dejo varios enlaces que me ayudaron por si alguien pasa por aquí con las mismas dudas:

[URL="httphttp://zomigi.com/blog/foreground-images-that-scale-with-the-layout/"]Foreground Images That Scale With The Layout[/URL]

[URL="http://unstoppablerobotninja.com/entry/fluid-images"]Fluid Images[/URL]

Sin duda habrán más y mejores enlaces pero bueno, estos son los que me sirvieron a mi :)

Un saludo y gracias otra vez !!!

EDIT: No sé por qué me coloca etiquetas en los enlaces...