Diseño Web Responsivo -Imágenes
Usando el atributo width
Si el atributo width se establece en 100%, la imagen será responsiva según el área del contenedor:
Ten en cuenta que en el ejemplo anterior, la imagen puede ser más grande que su tamaño original. Podemos usar elmax-widthatributo para resolver este problema de manera efectiva.
Usando el atributo max-width
Si el atributo max-width se establece en 100%, la imagen nunca será más grande que su tamaño original:
Añadir imágenes en páginas web
Imágenes de fondo
Las imágenes de fondo pueden ajustar su tamaño o escalarse de forma responsiva.
A continuación se presentan tres métodos diferentes:
1. Si el atributo background-size se establece en "contain", la imagen de fondo se adaptará proporcionalmente al área de contenido. La imagen mantiene su proporción:
Este es el código CSS:
Ejemplo
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
Pruébalo »
2. Si el atributo background-size se establece en "100% 100%", la imagen de fondo se estirará para cubrir toda el área:
Ejemplo
Este es el código CSS:
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
Pruébalo »
3. Si el atributo background-size se establece en "cover", la imagen de fondo se ampliará lo suficiente como para cubrir completamente el área de fondo. Ten en cuenta que este atributo mantiene la proporción de la imagen, por lo que algunas partes de la imagen de fondo no se mostrarán en el área de posicionamiento del fondo.
Este es el código CSS:
Ejemplo
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Pruébalo »
Mostrar diferentes imágenes en diferentes dispositivos
Las imágenes de gran tamaño pueden mostrarse en pantallas grandes, pero no se mostrarán bien en pantallas pequeñas. No es necesario cargar imágenes grandes en pantallas pequeñas, ya que esto afecta la velocidad de carga. Por lo tanto, podemos usar media queries para mostrar diferentes imágenes según el dispositivo.
Las siguientes imágenes grandes y pequeñas se mostrarán en diferentes dispositivos:
Ejemplo
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Pruébalo »
Puedes usar min-device-width en lugar del atributo min-width en las media queries. Esto detectará el ancho del dispositivo en lugar del ancho del navegador. Cuando se restablece el tamaño del navegador, el tamaño de la imagen no cambiará.
Ejemplo
body {
background-image: url('img_smallflower.jpg');
}
/* Dispositivos de 400px o más: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Pruébalo »
El elemento <picture> de HTML5
El elemento <picture> de HTML5<picture>puede establecer múltiples imágenes.
Soporte del navegador
| Elemento | |||||
|---|---|---|---|---|---|
| <picture> | No soportado | 38.0 | 38.0 | No soportado | 25.0 |
<picture>El elemento es similar al<video>y<audio>elemento. Puede configurar diferentes recursos; el primer recurso definido se usará preferentemente:
Ejemplo
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
Pruébalo »
srcsetEl atributo es obligatorio y define el recurso de la imagen.
mediaEl atributo es opcional; en las media queries, consulte laRegla CSS @mediaVer más detalles.
Para los navegadores que no soportan<picture>el elemento, también puedes definir el<img>elemento como alternativa.