Wie kann ich zeigen nur einen Teil eines Bildes in HTML / CSS?

Question

Lassen Sie uns sagen, dass ich eine Art und Weise wollen 50x50px eines Bildes einfach das Zentrum anzuzeigen, die 250x250px in HTML ist. Wie kann ich das machen. Außerdem gibt es eine Möglichkeit, dies für CSS zu tun: url () Referenzen?

Ich bin mir dessen bewusst clip in CSS, aber das scheint nur, wenn sie mit absoluter Positionierung zu arbeiten.

Answer 1

Eine Möglichkeit, es zu tun ist, um das Bild zu setzen Sie in einem Container als Hintergrund angezeigt werden sollen (td, div, Spanne usw.) und dann background-position stellen Sie die Sprite Sie wollen zu bekommen.

Answer 2

Während Sie haben bereits eine Antwort akzeptiert, werde ich nur hinzufügen, dass es die (etwas wenig bekannten) clip CSS-Eigenschaft, obwohl es tut erfordern, dass das Element abgeschnitten wird, ist position: absolute; (was schade ist):

.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>

JS Fiddle Demo , für Experimente.

die ursprüngliche Antwort ergänzen - etwas verspätet -. Ich bin der Bearbeitung die Verwendung von clip-path zu zeigen, was die jetzt veraltet clip Eigenschaft ersetzt

Die clip-path Eigenschaft ermöglicht eine Reihe von Optionen (stärker als die ursprüngliche clip), aus:

• inset -. Rechteckige / Quader Formen, definiert mit vier Werten als 'distanz von' (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 - definiert durch eine Reihe von x / y Koordinaten in Bezug auf die Herkunft des Elements der oberen linken Ecke. Da der Weg drei sein sollte automatisch die realistische Mindestpunktzahl für ein Polygon geschlossen ist, jeder weniger (zwei) ist eine Linie oder (eines) ist ein Punkt. polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])
• url - dies kann entweder eine lokale URL (mit einem CSS-ID-Selektor) oder die URL einer externen Datei (unter Verwendung eines Datei-Pfad) sein, ein SVG zu identifizieren, obwohl ich nicht mit entweder (noch experimentiert habe ), so kann ich keinen Einblick zu ihren Gunsten oder Einschränkung bieten.

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>

JS Fiddle Demo , für Experimente.

Referenzen:

• clip - note . veraltet
• clip-path (MDN) .
• clip-path (W3C) .

Answer 3

Eine weitere Alternative ist die folgende, wenn auch nicht das sauberste, wie es das Bild übernimmt das einzige Element in einem Behälter zu sein, wie in diesem Fall:

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

Sie können dann mit der gewünschten Größe den Behälter als Maske verwenden und umgeben das Bild mit einer negativen Marge es in die richtige Position zu bewegen:

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

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

Demo kann in diese JSFiddle gesehen werden.

Nur scheint in IE> 9, und wahrscheinlich alle wesentlichen Versionen von allen anderen Browsern zu arbeiten.