Comment puis-je obtenir le comportement CSS « ​​background-size : cover » avec les éléments d'image HTML ?

Couvrir et contenir des images avec des éléments HTML

Taille d'arrière-plan de CSS : les propriétés couvrir et contenir offrent une mise à l'échelle flexible des images pour les arrière-plans. Cependant, que se passe-t-il si vous souhaitez un contrôle similaire sur les images affichées à l'aide d'éléments HTML ? Voici comment procéder :

Solution 1 : La propriété object-fit

La propriété object-fit vous permet de spécifier comment une image s'adapte à son conteneur. Le définir sur cover reproduit le comportement de background-size: cover, en mettant l'image à l'échelle pour remplir tout le conteneur tout en préservant les proportions.

img {
  object-fit: cover;
}

Remarque : IE ne prend pas en charge les objets. -en forme.

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!