CSS background image - shrink to fit fixed size div

Question

У меня есть следующий код на https://jsfiddle.net/ncrcfduz, а также фоновое изображение на https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. Мне нужно сделать перемасштабирование фонового изображения, чтобы он поместился в div, предпочитая отображать большую часть «центрированного» содержимого на изображении. Следующий код показывает только верхний левый угол изображения.

.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

Вы ищете background-size: contain (see the css-tricks' entry), не cover. Чтобы ваш пример работал, вам придется отказаться от background-attachment: fixed. Используйте background-position: center, чтобы центрировать фон в div.

.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

Вы просто должны заменить "фиксированным" на "центр" на свою "фоновую" инструкции.

Как что:

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

JSFiddle здесь: https://jsfiddle.net/ncrcfduz/2/

Answer 3

вы должны использовать:

.container{ 
    background-size: 100%; 
}