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

  • gadgetgal38

    gadgetgal38

    9 HAZİRAN 2009
  • LinusTechTips

    LinusTechTip

    25 Kasım 2008
  • STITCHLESS TV how to sew your own style tutorials

    STITCHLESS T

    9 HAZİRAN 2011

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR