Согласно http://getbootstrap.com/css/#images-responsive, я хочу сделать мое изображение для поддержки адаптивного веб-сайта с помощью

<img src="..." class="img-responsive" alt="Responsive image">

Но это не работает.

Вот мой код,

<body>
    <img class="img-responsive" src="images/myImage.png" />
</body>

Исходный размер изображения: 284x191 .

Когда я открываю браузер с размером экрана 1920 * 1080, размер изображения составляет 284x191 . Но когда я открываю браузер с размером экрана 1280 * 720, размер изображения остается прежним.

Я не знаю, что я сделал не так, чтобы динамически уменьшить размер изображения. Спасибо за помощь.

2
Hikaru Shindo 25 Фев 2016 в 11:29

6 ответов

Лучший ответ

В Bootstrap 4 синтаксис: class="img-fluid"

6
dferenc 25 Янв 2018 в 10:11

Я была такая же проблема.

Я понял, что использую бутстрап 4 (а не 3).

Вернув его обратно на bootstrap 3, я исправил это.

0
Rahul Makhija 25 Янв 2018 в 05:34

img-responsive делает max-width:100%. Если вы хотите, чтобы изображение было во всю ширину (даже если оно на самом деле намного меньше, чем ширина типичного экрана), вам нужно заставить его быть width:100%. ..

http://codeply.com/go/fDNOBhaQPS

3
Zim 25 Фев 2016 в 12:39

Все, что вам нужно, это ширина: 100%. Использование col-xs-12:

<img class='img-responsive col-xs-12' />

Или же

<img class='img-responsive' style='width:100%;' />

Попробуйте этот код

4
Gopalakrishnan 25 Фев 2016 в 08:40

Используйте class = "img-fluid" для версии bootstrap 4

1
Samadhi Sri Udara Wijenayake 31 Май 2020 в 21:12

Вам нужно обернуть свой тег Img любым классом начальной загрузки. Как я сделал как div с классом col-lg-4.

<div class="col-lg-4">
    <img class="img-responsive" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />
</div>

Или

<img class="img-responsive col-lg-4" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />

Если вы не обернули тегом div

Ссылка: http://codepen.io/anon/pen/MygbNO

0
Ubiquitous Developers 25 Фев 2016 в 08:45