Conception Web adaptative -Images
Utilisation de la propriété width
Si la propriété width est définie sur 100%, l'image sera responsive selon les limites supérieure et inférieure :
Notez que dans l'exemple ci-dessus, l'image sera plus grande que sa taille d'origine. Nous pouvons utilisermax-widthCette propriété résout bien ce problème.
Utilisation de la propriété max-width
Si la propriété max-width est définie sur 100%, l'image ne sera jamais plus grande que sa taille d'origine :
Ajouter des images à une page web
Images d'arrière-plan
Les images d'arrière-plan peuvent être redimensionnées ou mises à l'échelle de manière responsive.
Voici trois méthodes différentes :
1. Si la propriété background-size est définie sur "contain", l'image d'arrière-plan s'adaptera proportionnellement à la zone de contenu. L'image conserve son rapport d'aspect :
Voici le code CSS :
Exemple
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 la propriété background-size est définie sur "100% 100%", l'image d'arrière-plan s'étirera pour couvrir toute la zone :
Exemple
Voici le code CSS :
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 la propriété background-size est définie sur "cover", l'image d'arrière-plan sera agrandie suffisamment pour couvrir complètement la zone d'arrière-plan. Notez que cette propriété conserve le rapport d'aspect de l'image, de sorte que certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone de positionnement d'arrière-plan.
Voici le code CSS :
Exemple
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Essayez-le vous-même »
Différents appareils affichent différentes images
Les grandes images peuvent être affichées sur de grands écrans, mais elles peuvent mal s'afficher sur de petits écrans. Il n'est pas nécessaire de charger de grandes images sur de petits écrans, car cela affecte la vitesse de chargement. Par conséquent, nous pouvons utiliser des requêtes média pour afficher différentes images sur différents appareils.
L'image grande et l'image petite suivantes seront affichées sur différents appareils :
Exemple
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');
}
}
Essayez-le vous-même »
Vous pouvez utiliser min-device-width dans les requêtes média à la place de la propriété min-width. Cela détectera la largeur de l'appareil plutôt que la largeur du navigateur. Lorsque la taille du navigateur est réinitialisée, la taille de l'image ne changera pas.
Exemple
body {
background-image: url('img_smallflower.jpg');
}
/* Appareils supérieurs à 400px (ou égaux) : */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Essayez-le vous-même »
Élément <picture> HTML5
d'HTML5<picture>L'élément peut être défini avec plusieurs images.
Prise en charge des navigateurs
| élément | |||||
|---|---|---|---|---|---|
| <picture> | Non pris en charge | 38.0 | 38.0 | Non pris en charge | 25.0 |
<picture>L'élément est similaire à<video>et<audio>L'élément. Différentes ressources peuvent être fournies, la première ressource définie étant celle préférée :
Exemple
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Fleurs">
</picture>
Essayez-le vous-même »
srcsetL'attribut est obligatoire et définit la ressource de l'image.
mediaL'attribut est facultatif et peut être utilisé dans les requêtes média.Règle @media CSSVoir les détails.
Pour ceux qui ne prennent pas en charge<picture>Le navigateur de l'élément, vous pouvez également définir.<img>Utilisez plutôt un élément.