Tutoriel sur l'image responsive CSS: Comment rendre les images réactives avec CSS

La majorité des sites Web actuels sont réactifs. Et si vous avez besoin de centrer et d'aligner l'image sur ces sites, vous devez apprendre à rendre les images fluides ou réactives avec CSS.

J'ai posté un tutoriel vidéo qui explique comment créer un site Web réactif étape par étape il y a quelques semaines. Dans la vidéo, nous avons créé une image responsive. Mais dans cet article, je voudrais donner un peu plus de détails sur la façon de rendre les images responsives.

Vous apprendrez également certains des problèmes généraux qui peuvent survenir lorsque vous essayez de rendre les images réactives - et je vais essayer d'expliquer comment les résoudre.

Comment rendre les images réactives avec CSS

Dois-je utiliser des unités relatives ou absolues?

Rendre une image fluide, ou réactive, est en fait assez simple. Lorsque vous téléchargez une image sur votre site Web, elle a une largeur et une hauteur par défaut. Vous pouvez les changer tous les deux avec CSS.

Pour rendre une image réactive, vous devez donner une nouvelle valeur à sa propriété width. Ensuite, la hauteur de l'image s'ajustera automatiquement.

La chose importante à savoir est que vous devez toujours utiliser des unités relatives pour la propriété width comme le pourcentage, plutôt que des unités absolues comme les pixels.

img { width: 500px; }

Par exemple, si vous définissez une largeur fixe de 500 pixels, votre image ne répondra pas, car l'unité est absolue.

img { width: 50%; }

C'est pourquoi vous devriez plutôt attribuer une unité relative comme 50%. Cette approche rendra vos images fluides et elles pourront se redimensionner quelle que soit la taille de l'écran.

Dois-je utiliser des requêtes multimédias?

L'une des questions que l'on me pose le plus est de savoir si vous devez utiliser les requêtes média ou non.

Une requête multimédia est une autre fonctionnalité importante de CSS qui permet de rendre un site Web réactif. Je n'entrerai pas dans plus de détails ici, mais vous pouvez lire mon autre article plus tard pour apprendre à utiliser les requêtes multimédias plus en détail.

La réponse à cette question est: «ça dépend». Si vous souhaitez que votre image ait des tailles différentes d'un appareil à l'autre, vous devrez utiliser des requêtes multimédias. Sinon, vous ne le ferez pas.

Maintenant, pour cet exemple, votre image a une largeur de 50% pour tout type d'écran. Mais lorsque vous souhaitez le rendre en taille réelle pour les appareils mobiles, vous devez obtenir de l'aide à partir des requêtes multimédias:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Ainsi, sur la base de la règle de requête multimédia, tout appareil de moins de 480 pixels occupera la pleine taille de la largeur de l'écran.

Vous pouvez également regarder la version vidéo de cet article ci-dessous:

Pourquoi la propriété max-width n'est-elle pas géniale?

La propriété max-width est une autre façon pour les développeurs de créer des images réactives. Cependant, ce n'est pas toujours la meilleure méthode à utiliser, car elle peut ne pas fonctionner pour tous les types de tailles d'écran ou d'appareils.

La première chose à comprendre avant de passer à un exemple est ce que fait exactement la propriété max-width.

La propriété max-width définit une largeur maximale pour un élément, ce qui ne permet pas à la largeur de cet élément d'être plus grande que sa valeur max-width (mais elle peut être plus petite).

Par exemple, si l'image a une largeur par défaut de 500 pixels et si la taille de votre écran n'a que 360 ​​pixels, vous ne pourrez pas voir l'image complète, car il n'y a pas assez d'espace:

img { max-width: 100%; width: 500px; // assume this is the default size }

Par conséquent, vous pouvez définir une propriété de largeur maximale pour l'image et la définir sur 100%, ce qui réduit l'image de 500 pixels à l'espace de 360 ​​pixels. Ainsi, vous pourrez voir l'image complète sur un écran de plus petite taille.

La bonne chose est que, puisque vous utilisez une unité relative, l'image sera fluide dans tout appareil de moins de 500 pixels.

Malheureusement, la taille de l'écran deviendra un peu plus grande que 500 pixels, mais l'image ne le sera pas car elle a une largeur par défaut de 500 pixels. Cette approche rompra la réactivité de l'image.

Pour résoudre ce problème, vous devez à nouveau utiliser la propriété width, ce qui rend la propriété max-width inutile.

Et les hauteurs?

Un autre problème courant que vous pouvez rencontrer concerne la propriété height. Normalement, la hauteur d'une image se redimensionne automatiquement, vous n'avez donc pas besoin d'attribuer une propriété de hauteur à vos images (car cela casse un peu l'image).

Mais dans certains cas, vous devrez peut-être travailler avec des images qui doivent avoir une hauteur fixe. Ainsi, lorsque vous attribuez une hauteur fixe à l'image, elle sera toujours réactive mais elle n'aura pas l'air bien.

img { width: 100%; height: 300px; }

Heureusement, il existe une autre propriété proposée par CSS pour résoudre ce problème ...

Solution: la propriété Object-Fit

Pour avoir plus de contrôle sur vos images, CSS fournit une autre propriété appelée object-fit. Utilisons la propriété object-fit et attribuons une valeur, ce qui rendra votre image meilleure:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

Si nécessaire, vous pouvez également utiliser la propriété object-position (en plus de object-fit) pour vous concentrer sur une partie spécifique de l'image. De nombreuses personnes ne connaissent pas la propriété object-fit, mais il peut être utile de résoudre ce type de problèmes.

J'espère que cet article vous a aidé à comprendre et à résoudre vos problèmes avec des images réactives. Si vous souhaitez en savoir plus sur le développement Web, n'hésitez pas à consulter ma chaîne Youtube.

Merci pour la lecture!