Comment puis-je obtenir des effets « background-size : cover » et « background-size : contain » sur les éléments de l'image à l'aide de CSS ?

Implémentation des propriétés de taille d'arrière-plan pour les éléments d'image

Le CSS moderne fournit un moyen d'afficher les images d'une manière similaire à la taille d'arrière-plan : cover et background-size : contiennent les propriétés des images d'arrière-plan.

Solution 1 : ajustement d'objet Propriété

Pour les navigateurs prenant en charge l'ajustement des objets, cette propriété permet une réplication transparente du comportement de la taille d'arrière-plan sur les éléments de l'image. Ajoutez simplement le CSS suivant à votre image :

body {
  margin: 0;
}

img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

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!