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

Ajuster l'image à un cadre de délimitation

Redimensionner une image proportionnellement dans un cadre de délimitation en utilisant uniquement CSS semble être une tâche simple. Cependant, cette approche ne suffit pas lorsque le résultat souhaité est d'agrandir l'image jusqu'à ce qu'elle remplisse entièrement une dimension du cadre de délimitation.

Solution CSS uniquement

Heureusement, CSS3 offre une solution à ce dilemme. En tirant parti des propriétés background-image et background-size, vous pouvez redimensionner les images dans les cadres de délimitation selon vos besoins.

Mise en œuvre

Pour mettre en œuvre cette solution, suivez ces étapes :

1. Créer un cadre de délimitation : Entourez l'image dans un élément HTML qui servira de cadre de délimitation.
2. Définir l'image d'arrière-plan : Définissez l'image comme image d'arrière-plan pour le cadre de délimitation.
3. Activer le confinement d'arrière-plan : Spécifiez background-size : contain pour garantir que l'image est mise à l'échelle pour s'adapter à l'intérieur du cadre de délimitation tout en en conservant son rapport hauteur/largeur.

Exemple

<code class="html"><div class="bounding-box">
  <!-- Image as background-image -->
</div></code>

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

Considérations supplémentaires

• Compatibilité des navigateurs : Cette solution est compatible avec les navigateurs modernes, comme le confirme CanIUse.com.
• Centrage de l'image : Pour centrer l'image dans le cadre de délimitation, utilisez le CSS suivant :

<code class="css">.bounding-box {
  position: absolute;
  background-position: center;
}</code>

En adoptant ces techniques CSS, vous pouvez efficacement redimensionner les images pour remplir les cadres de délimitation tout en conservant leurs proportions d'origine.

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!