SORU
19 Temmuz 2012, PERŞEMBE

Nasıl otomatik olarak kırpma ve görüntü merkezi

Rasgele bir görüntü verilen, görüntünün merkezinden bir kare kırpmak istiyorum ve belirli bir kare içinde görüntü.

Bu soru şuna benzer: CSS Display an Image Resized and Cropped ama ayarlamak kenar boşluklarını kullanamam bu yüzden resmin boyutunu bilmiyorum.

CEVAP
19 Temmuz 2012, PERŞEMBE

Bir çözüm bir arka plan görüntüsü bir unsur kırpılmış boyutlarına boy merkezlenmiş kullanmaktır.

Temel örnek

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}
<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

img etiketi ile örnek

Bu sürüm veya sağ tıklatın kaydetmek için sürükleyin yeteneği kaybetmek olmaz ki img etiketi korur. Kredi 24 ** opaklık kandırmak için.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}
<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

Gelecek

Ya da bugün, eğer hedef tarayıcılar chrome, opera and/or android.

CSS3 Images specification birlikte img Bir elementin görüntü içerik boyutu ve konumu üzerinde daha fazla kontrol için izin object-fit object-position özelliklerini tanımlar. Bu, istenen etkiyi elde etmek mümkün olacaktır:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}
<img class="center-cropped" src="http://placehold.it/200x200" />

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Css

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Adam Khoury

    Adam Khoury

    23 Ocak 2008
  • DigitalRev TV

    DigitalRev T

    30 AĞUSTOS 2007
  • lissaandbeauty

    lissaandbeau

    24 Aralık 2011

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR