Как сделать фоновое изображение адаптивным?

Question

[Ильшат]

Возможно ли, для изображения, которое задается в самом html-файле, задать CSS свойства так, чтобы при уменьшении окна браузера оно сжималось не целиком, а от краев к центру.
т.е. надо картинку:

<div class="slide"><img src="img/image.jpg" alt=""></div>

сжать как тут: cdn.sixrevisions.com/0431-01_responsive_background... ()

*Спасибо.

Answer 1

[Ильдар Сарибжанов]

Учитесь пользоваться инспектором, если надо как в примере, то joxi.ru/J2bJ6G6u41Nnl2

Можно чуть иначе:

<div class="conteiner" style="background-image: url(src/photo.jpg)"></div>

А у этого дива задаем стили:

.conteiner {
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
}

Answer 2

[Сергей Горячев]

Убрать background-size: cover; и сделать выравнивание background-position: 50% 50%.
И сделать это с использованием media-запроса, например, на ширине экрана менее 1200px.
Чтобы на больших экранах всё было нормально и не было белых краев.
А то, что изображение задается в html не важно, класс добавьте и через !important перекройте.