0

Имеется картинка 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;
}
2
  • 1
    попробуйте указать height в vw а не в px.. не лучшее решение, но в принципе должно работать
    – Darth
    25 апр 2015 в 12:12
  • @Darth, спасибо, это решает проблему в какойто степени)
    – AlexeyAl
    25 апр 2015 в 12:26

4 ответа 4

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
  • спасибо за ответ, понятно что лучше <img использовать, но там такое дело, что на этот img нужно будет поверх текст и картинки ложить, что для меня вызовет путанницу несусветную. Абсолютное позиционирование блоков по верх картинок и пошло поехало, пробовал - запутался.
    – AlexeyAl
    25 апр 2015 в 12:54
1

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

2
  • пробовал) на крайний случай можно, а так он картинку перекрывает...
    – AlexeyAl
    25 апр 2015 в 14:28
  • А, я не обратил внимание на «heigth двигался», тогда да, не пойдёт, наверно надо javascript
    – andreymal
    25 апр 2015 в 20:56
0

Попробуйте:

backgrounnd-size: cover;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.