Diseño Web Responsivo - Imágenes
Cambie el tamaño de la ventana del navegador para ver cómo se escala la imagen para ajustarse a la página.
Usando la propiedad de ancho
Si la widthpropiedad se establece en un porcentaje y la heightpropiedad se establece en "automático", la imagen responderá y se escalará hacia arriba y hacia abajo:
Ejemplo
img {
width: 100%;
height: auto;
}
Tenga en cuenta que en el ejemplo anterior, la imagen se puede ampliar para que sea más grande que su tamaño original. Una mejor solución, en muchos casos, será utilizar la
max-widthpropiedad en su lugar.
Uso de la propiedad max-width
Si la max-widthpropiedad se establece en 100%, la imagen se reducirá si es necesario, pero nunca se escalará para ser más grande que su tamaño original:
Ejemplo
img {
max-width: 100%;
height: auto;
}
Agregar una imagen a la página web de ejemplo
Ejemplo
img {
width: 100%;
height: auto;
}
Imágenes de fondo
Las imágenes de fondo también pueden responder al cambio de tamaño y escala.
Aquí mostraremos tres métodos diferentes:
1. Si la background-sizepropiedad se establece en "contener", la imagen de fondo se escalará e intentará ajustarse al área de contenido. Sin embargo, la imagen mantendrá su relación de aspecto (la relación proporcional entre el ancho y el alto de la imagen):
Aquí está el código CSS:
Ejemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. Si la background-sizepropiedad se establece en "100% 100%", la imagen de fondo se extenderá para cubrir toda el área de contenido:
Aquí está el código CSS:
Ejemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Si la background-sizepropiedad se establece en "cubrir", la imagen de fondo se escalará para cubrir toda el área de contenido. Tenga en cuenta que el valor de "cubierta" mantiene la relación de aspecto y es posible que se recorte parte de la imagen de fondo:
Aquí está el código CSS:
Ejemplo
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Diferentes imágenes para diferentes dispositivos
Una imagen grande puede ser perfecta en una pantalla de computadora grande, pero inútil en un dispositivo pequeño. ¿Por qué cargar una imagen grande cuando tienes que reducirla de todos modos? Para reducir la carga, o por cualquier otro motivo, puede usar consultas de medios para mostrar diferentes imágenes en diferentes dispositivos.
Aquí hay una imagen grande y una imagen más pequeña que se mostrarán en diferentes dispositivos:
Ejemplo
/* For width smaller than 400px: */
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');
}
}
Puede usar la consulta de medios min-device-width, en lugar de min-width, que verifica el ancho del dispositivo, en lugar del ancho del navegador. Entonces la imagen no cambiará cuando cambie el tamaño de la ventana del navegador:
Ejemplo
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
El elemento HTML <imagen>
El elemento HTML <picture>brinda a los desarrolladores web más flexibilidad para especificar recursos de imagen.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.