Comment puis-je afficher juste une partie d’une image en HTML/CSS ?

Question

Disons que je veux un moyen d'afficher uniquement le centre 50x50px d'une image de 250x250px en HTML.Comment puis je faire ça.Existe-t-il également un moyen de le faire pour les références css:url() ?

Je suis conscient de agrafe en CSS, mais cela semble fonctionner uniquement lorsqu'il est utilisé avec un positionnement absolu.

Answer 1

Une façon de procéder consiste à définir l'image que vous souhaitez afficher comme arrière-plan dans un conteneur (td, div, span, etc.), puis à ajuster la position de l'arrière-plan pour obtenir le sprite souhaité.

Answer 2

Bien que vous ayez déjà accepté une réponse, j'ajouterai simplement qu'il existe le (assez peu connu) clip propriété css, bien qu'elle fait exiger que l'élément à découper soit position: absolute; (ce qui est dommage):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

Démo JS Fiddle, pour l'expérimentation.

Pour compléter la réponse originale – un peu tardivement – ​​j'édite pour montrer l'utilisation de clip-path, qui a remplacé le désormais obsolète clip propriété.

Le clip-path la propriété permet une gamme d'options (plus que l'original clip), de:

• inset — formes rectangulaires/cuboïdes, définies avec quatre valeurs comme « distance de » (top right bottom left).
• circle — circle(diameter at x-coordinate y-coordinate).
• ellipse — ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
• polygon — défini par une série de x/y coordonnées par rapport à l'origine de l'élément du coin supérieur gauche.Comme le chemin est fermé automatiquement, le nombre minimum réaliste de points pour un polygone devrait être de trois, moins (deux) est une ligne ou (un) est un point : polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - cela peut être soit une URL locale (en utilisant un sélecteur d'identifiant CSS) soit l'URL d'un fichier externe (en utilisant un chemin de fichier) pour identifier un SVG, bien que je n'aie pas expérimenté non plus (pour l'instant), donc je ne peut offrir aucune idée quant à leur avantage ou leur mise en garde.

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

Démo JS Fiddle, pour l'expérimentation.

Les références:

• clip - note: obsolète.
• clip-path (MDN).
• clip-path (W3C).

Answer 3

Une autre alternative est la suivante, bien que pas la plus propre car elle suppose que l'image est le seul élément d'un conteneur, comme dans ce cas :

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

Vous pouvez ensuite utiliser le conteneur comme masque avec la taille souhaitée, et entourer l'image d'une marge négative pour la déplacer dans la bonne position :

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

La démo peut être vue dans ce JSFiddle.

Cela ne semble fonctionner que dans IE>9, et probablement dans toutes les versions importantes de tous les autres navigateurs.