0

Подскажите пожалуйста как сделать размер изображения во весь блок — 100% от размера блока (не от размера изображения)?

В Bootstrap есть класс .img-responsive, но там ширина изображения 100%. У меня его размер составляет 1024*768, следовательно на Large Display (больше 1200px) он будет меньше ширины блока.

Заранее спасибо!

Пример кода

 <div class="container">
    <div class="row">
        <div id="bg" class="col-sm-12 col-md-12 col-lg-12">
            <img id="bigImage" class="img-responsive img-rounded" src="img/img_1.jpg" alt="graffittied building">
        </div>
    </div>
</div>
5
  • а почему Вы решили, что он будет меньше? 24 апр 2017 в 11:09
  • @humster_spb потому-что там max-width, а не width
    – Oleksandr
    24 апр 2017 в 11:15
  • В Bootstrap 3 при класе (.img-responsive) max-width: составляєт 100% от ширини изображения. А у мене ширина блока больше 1200 px, а максимальная ширина изображения 1024px. И следовательно оно меньше его ширини.... Как то так
    – jsDev
    24 апр 2017 в 11:15
  • Сделайте изображение фоном блока и растягивайте сколько хотите. Качество при этом будет ухудшаться, надо заметить
    – labris
    24 апр 2017 в 11:18
  • 1
    а зачем Вам вообще этот класс .img-responsive? если Вы зададите изображению width: 100%, оно и так у Вас будет резиновым 24 апр 2017 в 11:24

1 ответ 1

-1

У .container есть padding по умолчанию в bootstrap. Для Large Display в media напиши

.container {padding: 0;}
#bg img {width:100%; height:auto}

А вообще что бы картинки были responsive для любых размеров, можно добавить в

html width="1024", height="768" и в CSS 
#bg img {width:100%; height:auto}

Ваш ответ

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

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