Doldurmak için nasıl CSS Görüntü boyutu, streç değil mi?

SORU

1 AĞUSTOS 2012, ÇARŞAMBA

Doldurmak için nasıl CSS Görüntü boyutu, streç değil mi?

Bir resim var, ve genişlik ve yükseklik (piksel cinsinden) belirli bir set istiyorum

Ama Eğer genişlik ve yükseklik css kullanarak ayarlayın (width:150px; height:100px), görüntü gergin olacak ve çirkin olabilir.

NasılDoldurunbelirli bir boyuta görüntüleri CSS kullanarak, vegerme değil?

Dolgu ve germe görüntü örneği:

Orijinal Resim:

Original

Görüntü Gergin:

Stretched

Resim Dolu:

Filled

Yukarıda Dolu görüntü örnekte unutmayın: ilk olarak, görüntü 150x255 (tutulan En-Boy oranı), ve daha sonra, yeniden boyutlandırıldığındakırpılmış150x100.

CEVAP

1 AĞUSTOS 2012, ÇARŞAMBA

Eğer CSS arka plan olarak resim kullanmak isterseniz, zarif bir çözüm var. Sadece cover background-size CSS3 özelliği contain kullanın.

<div class="container"></div>

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

cover ölçekli bir görüntü verecektir ise, contain küçültülmüş bir görüntü verecektir. Hem piksel en boy oranını korur.

8* *(kapak kullanarak)

9* *(içeren) kullanarak

Bu yaklaşım,' Hızlı Kılavuz. Thomas Fuchs başına Retina görüntüler için dost olmanın avantajı vardır http://cl.ly/0v2u190o110R

Her iki öznitelikleri için tarayıcı desteği IE6-8 hariç kayda değer değil. http://www.quirksmode.org/css/background.html

Bunu Paylaş: