HTML / CSS'de bir görüntünün yalnızca bir bölümünü nasıl görüntüleyebilirim?

Diyelim ki HTML'de 250x250 piksel olan bir görüntünün yalnızca merkezini 50x50 piksellik bir şekilde görüntülemek istiyorum. Bunu nasıl yapabilirim. Ayrıca, bunu css: url () referansları için yapmanın bir yolu var mı?

CSS'deki klibin farkındayım , ancak bu yalnızca mutlak konumlandırma ile kullanıldığında işe yarıyor gibi görünüyor.

Bunu yapmanın bir yolu, bir kapta arka plan olarak görüntülemek istediğiniz görüntüyü (td, div, span vb.) Ayarlamak ve ardından istediğiniz hareketli grafiği almak için arka plan konumunu ayarlamaktır.

Söz konusu belirtildiği gibi, orada clipo halde css özelliği yok eleman kırpılan yani gerektirir position: absolute;(utanç verici olan):

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

Deneme için JS Fiddle demosu .

Orijinal cevabı - biraz gecikmiş olarak - desteklemek için clip-pathşimdi kullanımdan kaldırılan clipözelliğin yerini alan kullanımını göstermek için düzenliyorum .

clip-pathMülkiyet seçenekleri (daha-so orijinalinden daha bir dizi verir clip) ait:

• inset- dört değerle 'uzaklık' olarak tanımlanan dikdörtgen / küboid şekiller (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- öğenin sol üst köşedeki kökeni ile ilgili bir dizi x/ ykoordinatla tanımlanır . Yol otomatik olarak kapanır olarak bir çokgen noktalarının gerçekçi az sayıda, üç olması gereken herhangi bir daha az (iki) bir hat ya da (bir), bir nokta şudur: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - Bu bir SVG'yi tanımlamak için yerel bir URL (bir CSS kimlik seçici kullanarak) veya harici bir dosyanın URL'si (bir dosya yolu kullanarak) olabilir, ancak (henüz) henüz denemedim, bu yüzden ben yararları veya uyarıları hakkında hiçbir fikir sunamaz.

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>

Deneme için JS Fiddle demosu .

Referanslar:

• clip- not: kullanımdan kaldırıldı .
• clip-path(MDN) .
• clip-path(W3C) .

Başka bir alternatif, görüntünün bu durumda olduğu gibi bir kaptaki tek öğe olduğunu varsaydığı için en temiz olmasa da aşağıdakilerdir:

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

Ardından kabı istenen boyutta bir maske olarak kullanabilir ve doğru konuma taşımak için görüntüyü negatif kenar boşluğu ile çevreleyebilirsiniz:

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

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

Demo bu JSFiddle'da görülebilir .

Sadece IE> 9 ve muhtemelen diğer tüm tarayıcıların tüm önemli sürümlerinde çalışıyor gibi görünüyor.