Comment puis-je redimensionner une image pour l'adapter à un cadre de sélection tout en conservant ses proportions à l'aide de CSS ?

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

Dans les situations où une image est plus grande que son conteneur, CSS fournit une solution simple en utilisant max -propriétés de largeur et de hauteur maximale. Cependant, lorsque l'objectif est d'agrandir une image jusqu'à ce qu'une de ses dimensions remplisse tout le conteneur, cette approche échoue.

Solution CSS3

Grâce à CSS3, il existe une solution viable qui utilise les propriétés background-image et background-size :

1. HTML :

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

   Copier après la connexion

2. CSS :

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

   Copier après la connexion

Cette approche garantit que l'image est mise à l'échelle pour s'adapter à l'intérieur du cadre de délimitation, en conservant ses proportions. Testez-le ici : http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain.

Alignement et compatibilité

Pour les navigateurs prenant en charge CSS3, cette méthode est entièrement compatible. Pour centrer le div, utilisez la variante suivante :

<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>

En exploitant la propriété background-size, CSS3 fournit un moyen pratique et efficace de redimensionner les images pour les adapter aux cadres de délimitation, en préservant les proportions de l'image et en permettant un alignement flexible. options.

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!