Images de conception Web réactive

Table des matières

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 sur un pourcentage et la propriété height est définie sur "auto", l'image sera réactif et évolutif :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

Notez que dans l'exemple ci-dessus, l'image peut être agrandie pour être plus grande. que sa taille originale. Dans de nombreux cas, une meilleure solution consistera à utiliser le propriété max-width à la place.

Utilisation de la propriété `max-width`

Si la propriété max-width est définie sur 100 %, l'image sera réduite si nécessaire, mais ne sera jamais agrandie pour être plus grande que sa taille. format original:

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale when the width is less than 460px.</p>

</body>
</html>

Ajouter une image à l'exemple de page Web

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

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

.row:after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <img src="img_chania.jpg" width="460" height="345">
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

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 propriété background-size est définie sur "contain", 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 hauteur/largeur (le rapport proportionnel 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 →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

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 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 →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

3. Si la propriété background-size est définie sur "cover", l'image d'arrière-plan sera mise à l'échelle pour couvrir toute la zone de contenu. Notez que la valeur "cover" conserve le rapport hauteur/largeur 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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

Différentes images pour différents appareils

Une grande image peut être parfaite sur un gros ordinateur écran, mais inutile sur un petit appareil. Pourquoi charger une grande image quand tu dois le réduire de toute façon ? 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'); 
    }
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
  background-repeat: no-repeat;
  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'); 
  }
}
</style>
</head>
<body>

<p style="margin-top:360px;">Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

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'); 
  }
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For device width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('img_smallflower.jpg'); 
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body { 
     background-image: url('img_flowers.jpg'); 
  }
}
</style>
</head>
<body>

</body>
</html>

L'élément HTML <picture>

L'élément HTML <picture> donne au Web les développeurs ont 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'en avoir un image qui est agrandie ou réduite en fonction de la largeur de la fenêtre d'affichage, plusieurs images peuvent être conçu pour mieux remplir la fenêtre du navigateur.

L'élément <picture> fonctionne de manière similaire à l'élément <video> et Éléments <audio>. Vous configurez différentes sources, et la première source qui correspond à la préférences est celle utilisée :

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 →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

L'attribut srcset est obligatoire et définit la source de l'image.

L'attribut media est facultatif et accepte les requêtes multimédias que vous trouvez dans Règle CSS @media.

Vous devez également définir un élément <img> pour les navigateurs qui ne prennent pas en charge le Élément <picture>.

Images de conception Web réactive

Table des matières

Utilisation de la propriété width

Exemple

Utilisation de la propriété max-width

Exemple

Ajouter une image à l'exemple de page Web

Exemple

Images d'arrière-plan

Exemple

Exemple

Exemple

Différentes images pour différents appareils

Exemple

Exemple

L'élément HTML <picture>

Exemple

Utilisation de la propriété `width`

Utilisation de la propriété `max-width`