映像在Bootstrap 4中无响应

Question

在大屏幕上使用宽度为100％的img标签时，图像适合屏幕，但是调整窗口大小时，会有一个水平滚动，显示空白，图像没有不再适合。我只想要一个完全响应的网站，但我不仅能得到它。请我该怎么办？

Answer 1

您需要添加.img-fluid。从w3schools文档中：

  

通过将.img-fluid类添加到来创建响应图像   标签

Answer 2

如果您使用的是容器和行，则可能还需要将图像包含在一个.col类的div中，以使其在缩放时保持其比例，例如：

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

注意：.col类实际上不是必需的，但我发现它使事情与使用容器和行时所期望的对齐

Answer 3

使用boostrap类

.img-fluid

或写作风格

max-width: 100%;
height: auto;

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

Answer 4

在Bootstrap 4中使用.img-fluid而不是.img-response类。  示例（如下）：

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