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

  • Easy Learn Tutorial

    Easy Learn T

    10 Kasım 2012
  • ItZWaffleS420

    ItZWaffleS42

    9 EYLÜL 2011
  • thetrollska

    thetrollska

    2 EKİM 2009

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR