El uso de la propiedad width
Si el width la propiedad se establece en 100%, la imagen se muestra receptiva y escalar hacia arriba y abajo:
Observe que en el ejemplo anterior, la imagen puede ser ampliado para ser más grande que su tamaño original. Una solución mejor, en muchos casos, será utilizar el max-width la propiedad en su lugar.
Usando la propiedad de ancho máximo
Si el max-width propiedad se establece en 100%, la imagen se escala hacia abajo si tiene que hacerlo, pero nunca escalar hasta ser más grande que su tamaño original:
Añadir una imagen a la página Web Ejemplo
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 el background-size propiedad se establece en "contener", la imagen de fondo se escala, y tratar de adaptarse al área de contenido. Sin embargo, la imagen se mantenga su relación de aspecto (la relación proporcional entre la anchura y la altura 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;
} Inténtalo tú mismo " 2. Si el background-size propiedad 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;
} Inténtalo tú mismo " 3. Si el background-size propiedad se establece en "cover" , la imagen de fondo escalará para cubrir toda el área de contenido. Observe que la "cover" valor mantiene la relación de aspecto, y alguna parte de la imagen de fondo se puede recortar:
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;
} Inténtalo tú mismo " Imágenes diferentes para diferentes dispositivos
Una imagen de gran tamaño puede ser perfecto en una pantalla de computadora grande, pero inútil en un dispositivo pequeño. ¿Por qué cargar una imagen de gran tamaño cuando se tiene que reduce la escala de todos modos? Para reducir la carga, o por cualquier otra razón, puede utilizar las consultas de medios para mostrar imágenes diferentes en diferentes dispositivos.
Aquí es una imagen grande y una pequeña imagen que se mostrará 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');
}
} Inténtalo tú mismo " Puede utilizar la consulta de medios min-device-width , en lugar de min-width , que comprueba la anchura del dispositivo, en lugar del tamaño del navegador. A continuación, 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');
}
} Inténtalo tú mismo " HTML5 <picture> Element
HTML5 introdujo la <picture> elemento, que le permite definir más de una imagen.
Soporte para el navegador
| Elemento | |||||
|---|---|---|---|---|---|
| <picture> | No soportado | 38.0 | 38.0 | No soportado | 25.0 |
La <picture> elemento funciona de forma similar a la <video> y <audio> elementos. Se configura diferentes fuentes, y la primera fuente que se adapte a las preferencias es el que está utilizando:
Ejemplo
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Inténtalo tú mismo " El srcset se requiere atributo, y define el origen de la imagen.
La media atributo es opcional, y acepta las preguntas de los medios que encuentre en regla CSS @media .
También debe definir un <img> elemento para navegadores que no soportan la <picture> elemento.