Comment redimensionner une image pour remplir un cadre de sélection tout en préservant les proportions en CSS ?

Mise à l'échelle d'une image pour remplir un cadre de délimitation tout en préservant les proportions

La mise à l'échelle d'une image pour qu'elle s'adapte à une boîte englobante tout en conservant ses proportions peut posent un défi en CSS.

Considérez les cas d'utilisation suivants :

• Cas d'utilisation 1 : Image plus grande que le conteneur.
• Cas d'utilisation 2 : Image plus petite que le conteneur (réduire).
• Cas d'utilisation 3 : Image plus petite que le conteneur (réduire).

Les propriétés CSS standard max-width et max-height ne fonctionnent que lorsque l'image est plus grande que le conteneur (cas d'utilisation 1 et 2).

Heureusement, CSS3 propose une solution pour le cas d'utilisation 3. En définissant le image comme image d'arrière-plan et en utilisant la propriété background-size avec la valeur contain, l'image peut être agrandie pour remplir le conteneur sans déformer ses proportions.

HTML :

<div class='bounding-box'>
</div>

CSS :

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Pour centrer l'image dans le conteneur :

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Cette solution est compatible avec la plupart des navigateurs modernes.

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!