Images de conception de sites Web réactifs
Redimensionnez la fenêtre du navigateur pour voir comment l’image s’adapte à la page.
Utilisation de la propriété width
Si la width propriété est définie sur un pourcentage et la height propriété est définie sur “auto”, l’image sera réactive et redimensionnée :
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é à la place.
Utilisation de la propriété max-width
Si la max-width 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 :
Ajouter une image à l’exemple de page Web
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 le background-size est définie sur “contain”, l’image d’arrière-plan sera mise à l’échelle et essaiera 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 {
largeur : 100 % ;
hauteur : 400px ;
image d’arrière-plan : url(“https://www.Infodewi.com/css/img_flowers.jpg”);
répétition d’arrière-plan : pas de répétition ;
taille d’arrière-plan : contenir ;
bordure : 1 pixel rouge uni ;
}
Essayez-le vous-même »
2. Si le background-size proprié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 {
largeur : 100 % ;
hauteur : 400px ;
image d’arrière-plan : url(“https://www.Infodewi.com/css/img_flowers.jpg”);
taille d’arrière-plan : 100 % 100 % ;
bordure : 1 pixel rouge uni ;
}
Essayez-le vous-même »
3. Si le background-size 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 {
largeur : 100 % ;
hauteur : 400px ;
image d’arrière-plan : url(“https://www.Infodewi.com/css/img_flowers.jpg”);
taille de fond : couverture ;
bordure : 1 pixel rouge uni ;
}
Essayez-le vous-même »
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
/* Pour une largeur inférieure à 400 px : */
corps {
image d’arrière-plan : url (“https://www.Infodewi.com/css/img_smallflower.jpg”);
}
/* Pour une largeur de 400px et plus : */
Écran @media uniquement et (min-width : 400px) {
corps {
image d’arrière-plan : url(“https://www.Infodewi.com/css/img_flowers.jpg”);
}
}
Essayez-le vous-même »
Vous pouvez utiliser la requête média min-device-widthau 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
/* Pour les appareils plus petits que 400px : */
corps {
image d’arrière-plan : url (“https://www.Infodewi.com/css/img_smallflower.jpg”);
}
/* Pour les appareils de 400px et plus : */
Écran @media uniquement et (min-device-width : 400px) {
corps {
image d’arrière-plan : url(“https://www.Infodewi.com/css/img_flowers.jpg”);
}
}
Essayez-le vous-même »
L’élément HTML
Le HTML <picture> L’élément donne aux développeurs Web plus de flexibilité dans la spécification des ressources d’image.
L’utilisation la plus courante du <picture>
L’élément sera destiné aux images utilisées dans les conceptions réactives. Au lieu d’avoir une image agrandie ou réduite en fonction de la largeur de la fenêtre d’affichage, plusieurs images peuvent être conçues pour mieux remplir la fenêtre d’affichage du navigateur.
Le <picture> l’élément fonctionne de la même manière que <video> et
<audio> éléments. Vous configurez différentes sources, et la première source qui correspond aux préférences est celle qui est utilisée :
Exemple
Essayez-le vous-même »
Le srcset L’attribut est obligatoire et définit la source de l’image.
Le media L’attribut est facultatif et accepte les requêtes multimédia que vous trouvez dans la règle CSS @media.
Vous devez également définir un <img> élément pour les navigateurs qui ne prennent pas en charge l’élément
<picture> élément.
#Images #conception #sites #Web #réactifs