Comment mettre à l'échelle les images pour les adapter aux boîtes englobantes en utilisant uniquement CSS ?

Mise à l'échelle des images pour les adapter aux boîtes englobantes à l'aide de CSS uniquement :

Le défi présenté est de mettre à l'échelle une image pour qu'elle s'adapte à une boîte englobante tout en en préservant ses proportions. Le code CSS fourni gère la réduction mais pas la mise à l'échelle.

Solution CSS3 :

Heureusement, CSS3 offre une solution :

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

Structure HTML :

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

Avec cette approche, l'image est définie comme image d'arrière-plan de l'élément de boîte englobante. La propriété background-size: contain garantit que l'image est mise à l'échelle pour remplir le cadre de délimitation sans la recadrer ni la déformer.

Compatibilité :

Cette solution a une bonne compatibilité avec les technologies modernes. navigateurs. Pour les dernières informations de compatibilité, reportez-vous à http://caniuse.com/background-img-opts.

Centrage :

Pour centrer l'image dans le cadre de délimitation , la variante suivante 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!