Изображение не отзывчиво в Bootstrap 4

Question

Когда я использую тег img с шириной 100% на большом экране, изображение умещается на экране, но при изменении размера окна появляется горизонтальная прокрутка, которая показывает пробелы, а изображение не подходит снова. Все, что я просто хочу, это полностью адаптивный сайт, но я не просто его получаю Пожалуйста, что мне делать?

Answer 1

Если вы используете контейнеры и строки, то вам также может понадобиться поместить изображение в div с классом .col, чтобы оно сохраняло свои пропорции при масштабировании, например:

<div class="container">
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="my-image.jpg" />
        </div>
    </div>
</div>

примечание: класс .col на самом деле не требуется, но я обнаружил, что он выровнял вещи так, как я ожидал бы при использовании контейнеров и строк

Answer 2

использовать класс boostrap

.img-fluid

или стиль записи

max-width: 100%;
height: auto;

https://getbootstrap.com/docs/4.0/content/images/

Answer 3

Используйте .img-fluid вместо .img-отзывчивого класса в Bootstrap 4. Пример (ниже): * * +1001

<img class="img-fluid" src="your_image.jpg" alt="Image">

Answer 4

Вам нужно добавить .img-жидкость. Из документации w3schools:

Создание адаптивных изображений путем добавления класса .img-fluid в тег