Масштабирование изображений с соотношением сторон 16: 9

У меня есть background image which is getting scaled, но проблема в том, что он растягивается и выглядит уродливым, когда смотрит на меньшие разрешения.

.bcg {
 background-position: center center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 height: 100%;
 width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/bcg_slide-1.png'); 
 background-size: 100% 100%}

Разметка HTML

<section id="slide-1">
 <div>
 <div>
 <div>
 <h2>Hello1</h2> 
 </div>
 </div>
 </div>
 </section>

Если я использую background-size: 100% auto; то это не perfectly fitting the entire window. Есть ли решение сделать background-image внутри div идеальным для всех resolutions и sizes.

2 ответа

Удалите размер фона со своего слайда, и пусть будет работать фон.bcg background-size: cover. Обложка сохранит пропорции и изменит размер изображения так, чтобы оно было самым маленьким, хотя оно все еще покрывало всю область. Contain аналогичные работы, но изменяет его размеры, поэтому один из размеров охватывает всю площадь.


background-position: contain; работает. Однако вам нужно немного перестроить свой CSS, чтобы проценты работали правильно.

html, body, #slide-1, .bcg {
 height: 100%;
}

#slide-1 .bcg {
 background: url('http://placekitten.com/g/1600/900') top center no-repeat; 
 background-size: contain;
}

http://jsfiddle.net/CPBy2/1/

Или, если вам действительно нужна DIV для масштабирования 16: 9, поэтому другой контент с потоком красиво на странице, вы можете сделать это и с помощью трюка.

#content {
 position: relative;
 background: url('http://placekitten.com/g/1600/900') top center no-repeat;
 background-size: contain;
}

#content:after {
 content: "";
 display: block;
 padding-top: 56.25%;
}

Content after

http://jsfiddle.net/46A5R/

licensed under cc by-sa 3.0 with attribution.