Mise à niveau 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 :

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

Structure HTML :

Avec cette approche, le 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 versions modernes. navigateurs. Pour obtenir 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 :

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