Conception de page web réactive - Images

Utilisation de l'attribut width

Si width l'attribut réglé sur un pourcentage et la hauteur réglée sur "auto", l'image répondra pour se dilater ou se rétrécir :

Exemple

img {
  width: 100%;
  height: auto;
}

Essayez-le vous-même

Veuillez noter que dans l'exemple ci-dessus, l'image peut être agrandie au-delà de sa taille originale. Dans la plupart des cas, une meilleure solution consiste à utiliser max-width Attribut.

Utilisation de l'attribut max-width

Si l'attribut max-width est réglé sur 100%, l'image sera réduite sur demande, mais ne dépassera jamais sa taille originale :

Exemple

img {
  max-width: 100%;
  height: auto;
}

Essayez-le vous-même

Ajouter une image à la page d'instance

Exemple

img {
  width: 100%;
  height: auto;
}

Essayez-le vous-même

L'image de fond

L'image de fond peut également répondre aux ajustements de taille et de proportion.

Voici les trois méthodes différentes que nous présentons :

1. Si l'on règle background-size Si l'attribut est réglé sur "contain", l'image de fond sera redimensionnée et essaiera de correspondre à la zone de contenu. Cependant, l'image conservera ses proportions d'aspects (rapport 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 vous background-size Si l'attribut est réglé sur "100% 100%", l'image de fond sera étirée 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 background-size Si l'attribut est réglé sur "cover", l'image de fond sera redimensionnée pour couvrir toute la zone de contenu. Notez que la valeur "cover" conserve les proportions de l'image et peut couper une partie de l'image de fond :

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

Préparer des images différentes pour différents appareils

La grande image peut s'afficher parfaitement sur un grand écran d'ordinateur, mais est inutile sur de petits appareils. Pourquoi charger une grande image lorsque l'image doit être réduite ? Pour réduire la charge ou pour toute autre raison, vous pouvez utiliser les requêtes média pour afficher différentes images sur différents appareils.

C'est une grande image et une petite image qui seront affichées sur différents appareils :

Exemple

/* Pour une largeur de moins de 400 pixels : */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Pour une largeur de 400 pixels ou plus : */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Essayez-le vous-même

Vous pouvez utiliser les requêtes média min-device-width plutôt que min-width Pour vérifier la largeur de l'appareil plutôt que la largeur du navigateur. Ensuite, lorsque vous ajustez la taille de la fenêtre du navigateur, l'image ne changera pas :

Exemple

/* Pour les appareils de moins de 400 pixels : */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Pour les appareils de 400 pixels et plus : */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Essayez-le vous-même

L'élément <picture> de HTML5

HTML5 a introduit <picture> L'élément permet de définir plusieurs images.

Prise en charge du navigateur

38.0 13 38.0 9.1 25.0

<picture> L'élément fonctionne de manière similaire à <video> et <audio> Élément. Nous avons configuré différentes sources, et la première source prioritaire est la source en cours d'utilisation :

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

srcset L'attribut est obligatoire, il définit l'origine de l'image.

media L'attribut est optionnel, il accepte les valeurs Règle @media CSS Trouvez les requêtes média.

Astuce :Vous devriez également définir pour les navigateurs <picture> Définition des éléments par le navigateur <img> Élément.