images responsive web design

Nous alllons parler des images responsives / adaptatives qui s'ajustent automatiquement aux dimensions de la page. Une image adaptative s'ajuste automatiquement pour s'afficher correctement quelque soit la largeur de l'écran.

Mais alors que l'image semble bien sur un écran de type 16: 9, dès que je passe à un écran 4: 3 ou un ordinateur portable, les bords de l'image sont coupés. Peut-être que ma compréhension de la mise à l'échelle des images en mode réactif est erronée, mais je pensais qu'ils étaient mis à l'échelle dans les deux dimensions. Ou est-ce que j'ai fait quelque chose de mal ?

Oui par défaut les images s'adaptent aux écrans, à conditions que cela soit défini dans les CSS. Aujourd'hui, 99% des sites et templates utilisent cette technique.

Cependant il faut bien comprendre comment les choses fonctionnent, vous voyez une image à l'écran, mais il existe 2 manières d'implémenter une image dans un site :

  1. <img /> balise HTML
  2. image de fond

Voyons donc en détail comment cela se passe pour ces deux solutions, qui apportent toutes les deux des résultats différents.

 

1. <img /> balise HTML


C'est le format image natif, lorsque vous ajoutez une image dans un article à côté d'un texte. Le navigateur utilise la taille de l'image pour définir la zone utilisée. Par défaut (avec un css correct height:auto;max-width:100%; ), l'image réduira sa largeur et sa hauteur en conséquence, pour être réactive.

  • max-width:100%; on dit à l'image qu'elle n'a pas le droit de dépasser la largeur de son élément parent, elle n'a donc pas le choix, elle doit se réduire si nécessaire
  • height:auto; on dit à l'image qu'elle doit automatiquement calculer sa hauteur. En effet si on change sa largeur on veut que l'image conserve ses proportions

Vous pouvez également forcer les dimensions de l'image en lui indiquant une propriété width et height en CSS. Attention si vous donnez des dimensions fixes, votre image peut se retrouver déformée. Pour palier à cela, vous pouvez opter pour la propriété object-fit qui permet d'adapter l'image à ses propres dimensions.

Quelques explications sur la propriété object-fit :

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

 

2. Image de fond


On utilise une image de fond pour ajouter un décor, une illustration. Dans ce cas l'image se place derrière une balise HTML. Il ne définit aucune taille, il n'adaptera pas la hauteur du contenu, il ne sera pas vraiment "responsive".

Vous pouvez définir quelques paramètres pour une taille d'image d'arrière-plan grâce à la propriété background-size :

  • cover : (couverture) remplira tout l'espace disponible et recadrera ce qui est à l'extérieur. L'image sera tronquée sur les côtés qui dépassent
  • contain : (contient) remplira la zone avec la plus grande dimension possible et laissera un espace vide autour (pas de recadrage)

Il existe d'autres possibilités pour background-size mais ces deux-ci sont les plus courants et les plus pratiques.

Si vous avez une image de fond, vous avez 2 solutions si vous ne voulez pas la recadrer / couper :

  1. utiliser la taille d'arrière-plan contain
  2. définir une hauteur sur le conteneur (balise html) qui est la même que le ratio d'image. Que ce soit avec cover ou contain, votre image aura toujours la même proportion que la zone qu'elle couvre. Voir point 3. suivant.

 

3. Définir une zone de la même dimension que l'image

 

Cette technique vous permet de définir une image de fond dans une zone qui aura les mêmes proportions. Votre image ne sera pas coupée et la zone s'adaptera de la même manière. Vous pouvez réaliser cela à l'aide à l'aide de l'unité vw (viewport width = largeur de la fenêtre d'affichage).

Dans cet exemple on considère une zone qui prend toute la largeur de l'écran, comme une zone d'en-tête.

On commence par calculer le ratio de l'image, exemple avec une image ayant pour dimensions 1200x800 = 67%

On va forcer la hauteur du conteneur ne lui indiquant sa hauteur d'une valeur de 67% en fonction de la largeur de l'écran. Ainsi lorsque l'écran se réduit, la hauteur du conteneur également, en même proportion que l'image.

Voici un exemple de code CSS à utiliser :
#ID {
height: 67vw;
background: url(image.jpg) center center no-repeat;
background-size : cover;
}

Et voilà, le tour est joué ! Maintenant que vous avez les détails sur les rouages de ces images qui s'adaptent toutes seules, vous n'avez plus d'excuses pour arriver à les adapter à toutes les situations.

 

Site réalisé par Cédric KEIFLIN - Mentions légales

Copyright © 2010 - 2020 Tutoriels Joomla! - Tous droits réservés - Joomla! est un Logiciel Libre diffusé sous licence GNU General Public

https://tutoriels-joomla.joomlack.fr n'est ni affilié à Open Source Matters ou au projet Joomla ni approuvé par eux.
Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, le propriétaire mondial de la marque de commerce.