Utilisation de la propriété width
Si la width propriété est définie à 100%, l'image sera sensible et l' échelle de haut en bas:
Notez que dans l'exemple ci-dessus, l'image peut être agrandie pour être plus grande que sa taille d'origine. Une meilleure solution, dans de nombreux cas, sera d'utiliser le max-width propriété au lieu.
Utilisation de la propriété max-width
Si le max-width propriété est définie à 100%, l'image réduire si elle doit, mais jamais évoluer jusqu'à être plus grande que sa taille d' origine:
Ajouter une image à la page Web Exemple
Contexte Images
Les images de fond peuvent également répondre à redimensionnement et mise à l'échelle.
Ici, nous allons montrer trois méthodes différentes:
1. Si le background-size propriété est définie à «contenir», l'image d'arrière - plan l' échelle, et essayer d'adapter la zone de contenu. Cependant, l'image gardera son rapport d'aspect (la relation proportionnelle entre la largeur et la hauteur de l'image):
Voici le code CSS:
Exemple
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
} Essayez - le vous - même » 2. Si le background-size propriété est définie à "100% à 100%", l'image d'arrière - plan étirer pour couvrir toute la zone de contenu:
Voici le code CSS:
Exemple
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Essayez - le vous - même » 3. Si le background-size propriété est définie à "cover" , l'image d'arrière - plan échelle pour couvrir toute la zone de contenu. Notez que la "cover" valeur conserve le rapport d'aspect, et une partie de l'image d'arrière - plan peut être clipsé:
Voici le code CSS:
Exemple
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Essayez - le vous - même » Différentes images pour les différents appareils
Une grande image peut être parfaite sur un grand écran d'ordinateur, mais inutile sur un petit appareil. Pourquoi charger une grande image lorsque vous avez à l'échelle vers le bas de toute façon? Pour réduire la charge, ou pour toute autre raison, vous pouvez utiliser des requêtes de médias pour afficher des images différentes sur différents appareils.
Voici une grande image et une image plus petite qui sera affichée sur différents appareils:
Exemple
/* 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');
}
} Essayez - le vous - même » Vous pouvez utiliser la requête des médias min-device-width , au lieu de min-width , qui vérifie la largeur de l' appareil, au lieu de la largeur du navigateur. Ensuite, l'image ne changera pas lorsque vous redimensionnez la fenêtre du navigateur:
Exemple
/* 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');
}
} Essayez - le vous - même » HTML5 <picture> Element
HTML5 introduit le <picture> élément, qui vous permet de définir plus d'une image.
support du navigateur
| Élément | |||||
|---|---|---|---|---|---|
| <picture> | Non supporté | 38,0 | 38,0 | Non supporté | 25,0 |
Le <picture> élément fonctionne de manière similaire à la <video> et <audio> éléments. Vous mettez en place de différentes sources, et la première source qui correspond aux préférences est celui qui est utilisé:
Exemple
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Essayez - le vous - même » L' srcset attribut est nécessaire, et définit la source de l'image.
Le media attribut est facultatif, et accepte les requêtes des médias que vous trouverez dans la règle CSS @media .
Vous devez également définir un <img> élément pour les navigateurs qui ne supportent pas la <picture> élément.