Imágenes
Si la propiedad width
de una imagen se establece en un porcentaje y la propiedad height
se establece en "auto", la imagen será responsiva y se escalará hacia arriba y hacia abajo:
img {
width: 100%;
height: auto;
}
No obstante, en la mayoría de casos no nos interesará que la imagen supere su tamaño original, para evitarlo podemos emplear la propiedad max-width
:
img {
max-width: 100%;
height: auto;
}
Otro aspecto que nos puede interesar, es utilizar una imagen distinta en función del tamaño de pantalla, para ello podemos utilizar los ya comentados Media Queries:
/* Para smartphones (Mobile First) */
body {
background-image: url('img_smallflower.jpg');
}
/* Para anchos de pantalla de como mínimo 768 pixeles (a partir de tablets en formato horizontal) */
@media only screen and (min-width: 768px) {
body {
background-image: url('img_flowers.jpg');
}
}
Última actualización
¿Te fue útil?