recherche

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

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

Patricia Arquette
Patricia Arquetteoriginal
2024-12-17 19:46:13798parcourir

How Can I Achieve CSS `background-size: cover` Behavior with HTML Image Elements?

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!

css html Object if for while using Property background
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment puis-je ajouter des images d’arrière-plan aux cercles SVG ?Article suivant：Comment puis-je ajouter des images d’arrière-plan aux cercles SVG ?

Articles Liés

Voir plus