Conception de sites Web réactifs - Images
Redimensionnez la fenêtre du navigateur pour voir comment l'image s'adapte à la page.
Utilisation de la propriété width
Si la widthpropriété est définie sur un pourcentage et que la heightpropriété est définie sur "auto", l'image sera réactive et redimensionnée :
Exemple
img {
width: 100%;
height: auto;
}
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, consistera à utiliser la
max-widthpropriété à la place.
Utilisation de la propriété max-width
Si la max-widthpropriété est définie sur 100 %, l'image sera réduite si nécessaire, mais jamais agrandie pour être plus grande que sa taille d'origine :
Exemple
img {
max-width: 100%;
height: auto;
}
Ajouter une image à l'exemple de page Web
Exemple
img {
width: 100%;
height: auto;
}
Images d'arrière-plan
Les images d'arrière-plan peuvent également répondre au redimensionnement et à la mise à l'échelle.
Ici, nous allons montrer trois méthodes différentes :
1. Si la background-sizepropriété est définie sur "contenir", l'image d'arrière-plan sera mise à l'échelle et tentera de s'adapter à la zone de contenu. Cependant, l'image conservera 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;
}
2. Si la background-sizepropriété est définie sur "100 % 100 %", l'image d'arrière-plan s'étirera 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;
}
3. Si la background-sizepropriété est définie sur "couvrir", l'image d'arrière-plan sera mise à l'échelle pour couvrir toute la zone de contenu. Notez que la valeur "cover" conserve le format d'image et qu'une partie de l'image d'arrière-plan peut être tronquée :
Voici le code CSS :
Exemple
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Différentes images pour 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 alors que vous devez quand même la réduire ? Pour réduire la charge, ou pour toute autre raison, vous pouvez utiliser des requêtes multimédias pour afficher différentes images sur différents appareils.
Voici une grande image et une image plus petite qui seront affichées 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');
}
}
Vous pouvez utiliser la requête multimédia 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 redimensionnerez 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');
}
}
L'élément HTML <image>
L'élément HTML <picture>donne aux développeurs Web plus de flexibilité dans la spécification des ressources d'image.
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.