Conception Web Responsive - Images
Redimensionnez la fenêtre du navigateur pour voir comment l'image s'adapte à la page.
Utilisation de la propriété width
Si la propriété width est définie en pourcentage et que la propriété height est définie sur "auto", l'image sera responsive et s'ajustera :
Exemple
img {
width: 100%;
height: auto;
} Remarquez que dans l'exemple ci-dessus, l'image peut être agrandie pour devenir plus grande que sa taille d'origine. Une meilleure solution, dans de nombreux cas, sera d'utiliser la propriété max-width à la place.
Utilisation de la propriété max-width
Si la propriété max-width est définie à 100%, l'image se réduira si nécessaire, mais ne s'agrandira jamais pour dépasser sa taille d'origine :
Exemple
img {
max-width: 100%;
height: auto;
} Ajouter une image à la page web d'exemple
Exemple
img {
width: 100%;
height: auto;
} Images de fond
Les images de fond peuvent également s'adapter au redimensionnement et à l'échelle.
Ici, nous allons montrer trois méthodes différentes :
1. Utilisation de background-size: contain; : L'image de fond s'ajustera et essaiera de remplir la zone de contenu. Cependant, l'image conservera son rapport d'aspect (la relation proportionnelle entre la largeur et la hauteur de l'image) :
Exemple
Utilisation de background-size: contain; :
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
} 2. Utilisation de background-size: 100% 100%; : L'image de fond s'étirera pour couvrir toute la zone de contenu :
Exemple
Utilisation de background-size: 100% 100%; :
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid black;
} 3. Utilisation de background-size: cover; : L'image de fond s'ajustera pour couvrir toute la zone de contenu. Remarquez que la valeur "cover" conserve le rapport d'aspect, et qu'une partie de l'image de fond peut être coupée :
Exemple
Utilisation de background-size: cover; :
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid black;
} 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 quand vous devez de toute façon la réduire ? Pour alléger la charge, ou pour d'autres raisons, vous pouvez utiliser des requêtes média pour afficher différentes images sur différents appareils.
Exemple
/* Pour une largeur inférieure à 400px : */
body {
background-image: url('img_smallflower.jpg');
}
/* Pour une largeur de 400px et plus : */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
} L'élément HTML <picture>
L'élément HTML <picture> offre aux développeurs web plus de flexibilité dans la spécification des ressources d'image.
L'utilisation la plus courante de l'élément <picture> sera pour les images utilisées dans des conceptions responsives. Au lieu d'avoir une seule image qui est redimensionnée en fonction de la largeur de la fenêtre, plusieurs images peuvent être conçues pour remplir plus agréablement la fenêtre du navigateur.
L'élément <picture> fonctionne de manière similaire aux éléments <video> et <audio> . Vous configurez différentes sources, et la première source qui correspond aux préférences est celle qui est utilisée :
Exemple
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Fleurs">
</picture> L'attribut srcset est requis et définit la source de l'image.
L'attribut media est optionnel et accepte les requêtes média que vous trouvez dans la règle CSS @media .
Vous devez également définir un élément <img> pour les navigateurs qui ne prennent pas en charge l'élément <picture> .
Galerie d'images responsive
Ici, nous utilisons des requêtes média avec flexbox pour créer une galerie d'images responsive :