时间戳

首页 > 解决方案 > 移动分辨率上的 boostrap 4 img-fluid strechs 图像

bootstrap-4 - 移动分辨率上的 boostrap 4 img-fluid strechs 图像

问题描述

我需要一个带有响应组件的 100% 图像响应宽度。当我使用：

<div class="container-fluid">
    <div class="row">
        <img src="images/centre-mob.jpg" alt="" class="img-fluid">
    </div>
</div>

图像会拉伸。宽度是响应式的，但不是高度。

当我使用：

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <img src="images/centre-mob.jpg" alt="" class="img-fluid">
        </div>
    </div>
</div>

响应很好，但我的左右两边都有排水沟

最后：

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-12">
            <img src="images/centre-mob.jpg" alt="" class="img-fluid">
        </div>
    </div>
</div>

也不是排水沟的解决方案......

正确的解决方案是：

<div class="container-fluid">
    <img src="images/centre-mob.jpg" alt="" class="img-fluid">
</div>

但在这种情况下，排水沟是存在的。而且我根本不需要填充...

我不知道该怎么做......它在 Firefox 上运行良好，但在 Chrome 上运行良好

有什么帮助吗？

此致

标签： bootstrap-4responsive

解决方案

使用您的第二个代码示例并添加一个新类以从 col-12 重置填充：

<div class="container-fluid">
    <div class="row">
        <div class="col-12 padding-reset">
            <img src="images/centre-mob.jpg" alt="" class="img-fluid">
        </div>
    </div>
</div>

CSS：

.padding-reset {
   padding: 0;
}

推荐阅读