background-size: contain; резиновый height

Рейтинг: 0Ответов: 3Опубликовано: 25.04.2015

Имеется картинка 2500 х 862, которую я хочу выставить в качестве background(a) одного из блоков. Картинка должна так же адаптироваться при уменьшении размера экрана внутри блока. Я воспользовался свойством background-size: contain; который не плохо подошел, почти как в boosttrap class img-response, только для картинок. Но есть одно но, при уменьшении экрана ширина уменьшается(картинка адаптируется) = уменьшается так же и высота картинки(но не блока!) и получается дырка в div. Как я понял height не резиновый, но я не могу его не прописать т.к без этого вообще div исчезает. Что мне предпринять, что бы heigth двигался на равне с изменением размеров картинки а не оставался прежним 635px?

.bot{
    height: 635px;
    background-image: url(../img/bottom.png);
    background-repeat: no-repeat;
    background-size: contain;
}
css html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Эластичное фоновое изображение можно сделать с применением padding-top: 56.25% либо padding-bottom: 56.25%;

например, как вот здесь.

http://codepen.io/anon/pen/JdoxgJ

Подробно об адаптивных фоновых изображениях можно прочитать тут - http://habrahabr.ru/post/157817/

▲ 1

в данном случае лучше использывать img а не background-image. или же нужно будет регулировать высоту блока с помощью js. Ответ на ваш вопрос по ссылке

код: html

<div class="bot">
<img src="http://noxblog.ru/uploads/posts/2012-02/1329243992_guitar-and-leads_1600_mini.jpg" alt="" />
</div>

css

img{
  display: block;
  max-width: 100%;
  height: auto;
}
.bot{background: #ccc;
    max-height: 600px;
    background-repeat: no-repeat;
    background-size: contain;
}
▲ 1

Может, вам нужен просто background-size: cover;? Он как contain, только не оставляет нигде дырок (вместо этого обрезает невлезающую картинку).