html - 图像与两列 Bootstrap 类重叠

Question

如果图像太大，图像会重叠在第二列上。我有以下 HTML 元素供引用:

<div class="col-lg-9">
    <img src="https://example.com/my-large-img.png" />
</div>
<div class="col-lg-3">
    //My second column
</div>

这是输出，因为图像太大。

我现在的决心是在图像上添加宽度“img {width: 100%}”

问题是我有一张小图片，我想以常规尺寸显示图片。添加 width: 100% 将使图像拉伸(stretch)。

因此，如果图像大于第一列，我希望它是父级宽度的 100%，如果图像小于父级宽度，我不想将其设置为 width: 100%。

Answer 1

有一个 Bootstrap 类 img-fluid 专门给图像 max-width: 100%; 和 height: auto; 你可以像这样添加到图像中:

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

Bootstrap - Responsive images