CSS arka plan resmi - sabit boyutta sığdırmak için küçültme div

Question

Aşağıdaki kodu https://jsfiddle.net/ncrcfduz adresinde ve https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg adresinde arka plan görüntüsüne sahibim. Görüntüdeki "ortalanmış" içeriğin çoğunu göstermek için tercih edilen arka plan resmini div'a sığdırmam gerekiyor. Aşağıdaki kod sadece resmin sol üst köşesini gösterir.

.container { 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 150px; 
 
    width: 300px; 
 
}

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

Answer 1

Sen background-size: contain (see the css-tricks' entry) arıyoruz değil cover. Çalışmanızı örnek almak için background-attachment: fixed'u bırakmanız gerekecek. Arka planınızı div ürününüzde ortalamak için background-position: center kullanın.

.container{ 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: contain; 
 
    
 
    height: 150px; 
 
    width: 300px; 
 
}

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

Answer 2

Az önce "arka plan" talimatı üzerine "merkez" tarafından "sabit" değiştirmek zorunda. Bunun gibi

: Burada

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; 

JSFiddle: https://jsfiddle.net/ncrcfduz/2/

Answer 3

kullanmalısınız:

.container{ 
    background-size: 100%; 
}