Comment puis-je afficher une partie spécifique d'une image à l'aide de HTML et CSS ?

Affichage d'une partie d'une image en HTML/CSS

La possibilité d'afficher une partie spécifique d'une image est une exigence courante dans le Web développement. Que ce soit pour créer une vignette ou mettre en avant une section particulière, plusieurs techniques sont disponibles :

Solution HTML

La solution element offre une solution puissante pour afficher différentes parties d’image en fonction de critères spécifiques. En imbriquant plusieurs fichiers éléments dans une conteneur, vous pouvez spécifier différentes URL ou styles d'image pour différentes tailles de fenêtre d'affichage, ratios de pixels de l'appareil ou d'autres conditions. Cette approche offre une plus grande flexibilité pour contrôler la partie de l'image affichée :

<picture>
  <source media="(min-width: 1000px)" srcset="image-full.jpg">
  <source media="(min-width: 500px)" srcset="image-medium.jpg 50w, image-full.jpg 100w">
  <img src="image-small.jpg" alt="default image">
</picture>

Solution CSS utilisant clip()

La propriété clip(), comme mentionné dans la question , vous permet de définir une région rectangulaire à afficher dans un élément. Cependant, cela nécessite que l'élément soit positionné de manière absolue :

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

css:url() Références

Malheureusement, la propriété clip() ne peut pas être utilisée directement avec références css:url(). Cependant, vous pouvez créer un nouvel élément d'image comportant la partie découpée souhaitée, puis utiliser cette image comme image d'arrière-plan de l'élément d'origine :

#element {
  background-image: url(clip.png);
  background-position: 50% 0%;
}

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!