Comment puis-je redimensionner les images pour les adapter aux boîtes englobantes en utilisant uniquement CSS ?

Mise à l'échelle des images pour les adapter aux cadres de délimitation à l'aide de CSS uniquement

Obtenir un effet de mise à l'échelle dynamique de l'image qui préserve les proportions peut s'avérer difficile. Cependant, en utilisant les techniques CSS3, nous pouvons résoudre ce problème et redimensionner les images pour les adapter à un cadre de délimitation.

L'approche conventionnelle avec CSS consiste à utiliser les propriétés max-width et max-height, qui réduisent les images pour les adapter. dans un conteneur spécifié. Cependant, lors de la mise à l'échelle des images, ces propriétés ne suffisent pas.

Solution CSS3

CSS3 offre la solution via les propriétés background-image et background-size. En définissant une image comme arrière-plan d'un conteneur et en utilisant background-size: contain, nous pouvons forcer l'image à être mise à l'échelle jusqu'à ce qu'une dimension atteigne la pleine largeur ou la hauteur du cadre de délimitation.

HTML

<code class="html"><div class='bounding-box'></div></code>

CSS

<code class="css">.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}</code>

Compatibilité et options

Cette solution est supportée par les derniers navigateurs . CanIUse fournit un tableau de compatibilité détaillé.

Pour centrer l'image dans le cadre de délimitation, une variante du CSS peut être utilisée :

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!