GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Diseño Web Responsivo - Imágenes

Uno de los elementos más utilizados en el diseño Web son las imágenes por ello tienen un valor
especial en su tratamiento, para el diseño Web responsivo, necesitamos que las imágenes
conserven la esencia de la información que transmiten, de forma independiente del dispositivo
con que se observa, claro está que existirán casos donde el detalle será mas preciso en grandes
formatos, pero de igual modo llevará la carga de información.

Mediante la propiedad width

Con la propiedad width se establece en 100% el ancho de la imagen, esta será sensible y escalar
hacia arriba y abajo:

img {
width: 100%;
height: auto;
}
Ver: Código 451.html

Observe que en el ejemplo anterior, la imagen se puede escalar hasta ser más grande que su
tamaño original. Una solución mejor, en muchos casos, será el uso de la propiedad max-width
en lugar.

Utilizando la propiedad max-width

La propiedad max-width establece en 100% el ancho de la imagen, la cual se escala hacia abajo
si tiene que hacerlo, pero nunca será escalar hasta ser más grande que su tamaño original:

img {
max-width: 100%;
height: auto;
}
Ver: Código 452.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Imágenes de fondo
Las imágenes de fondo también pueden responder a cambiar el tamaño y la escala.
Aquí vamos a mostrar tres métodos diferentes:

1. Si la propiedad background-size se establece en "contein", la imagen de fondo se

escala y tratar de adaptarse al área de contenido. Sin embargo, la imagen mantiene su
relación de aspecto (la relación proporcional entre la anchura y la altura de la imagen):

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
Ver: Código 453.html

2. Si la propiedad background-size se establece en "100% 100%", la imagen de fondo se

extenderá para cubrir toda el área de contenido:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}

Ver: Código 454.html

3. Si la propiedad background-size se establece en "cubrir", la imagen de fondo se escala

para cubrir toda el área de contenido. Observe que el valor "cubierta" mantiene la relación
de aspecto y una parte de la imagen de fondo se puede recortar:

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}

Ver: Código 455.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Imágenes diferentes para diferentes

dispositivos
Una imagen de gran tamaño puede ser perfecta en una pantalla de ordenador grande, pero inútil
en un dispositivo pequeño. ¿Por qué cargar una imagen de gran tamaño cuando se tiene que
reducir la escala de todos modos? Para reducir la carga, o por cualquier otra razón, puede utilizar
preguntas de los medios para mostrar diferentes imágenes en diferentes dispositivos.

Aquí es una imagen grande y una imagen más pequeña que se mostrará en diferentes dispositivos:

/* para dispositivos con pantallas menores a 400px: */

body {
background-image: url('imagenes/1.jpg');
}

/* para dispositivos con pantallas de 401px y mayores: */

@media only screen and (min-width: 400px) {
body {
background-image: url('imagenes/colonia.jpg');
}
}

Ver: Código 456.html

Puede utilizar la consulta de medios min-device-width, en lugar de min-width, que

comprueba la anchura del dispositivo, en lugar del ancho del navegador. A continuación, la
imagen no cambiará cuando cambie el tamaño de la ventana del navegador:

/* para dispositivos menores a 400px: */

body {
background-image: url('imagenes/1.jpg');
}

/* por dispositivos de 400px y mayores: */

@media only screen and (min-device-width: 400px) {
body {
background-image: url('imgagenes/colonia.jpg');
}
}

Ver: Código 457.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

HTML5 Elementos de imágenes

HTML5 introdujo el elemento <picture>, que le permite definir más de una imagen. El elemento
<picture> funciona de forma similar a los elementos <video> y <audio>. Se configuran
diferentes fuentes de imágenes y la primera fuente que se adapte a las preferencias o
características es la que se utilizará:

<picture>
<source srcset="imagenes/1.jpg" media="(max-width: 400px)">
<source srcset="imagenes/colonia.jpg">
<img src=" imagenes/colonia.jpg " alt="Flores">
</picture>

Ver: Código 458.html

Se requiere el atributo srcset, este define la fuente de la imagen. También debe definir un
elemento <img> para navegadores que no soportan el elemento <picture>.