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:

Görüntü Gergin:

Resim Dolu:

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.

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