Question

我需要具有响应组件的图像响应宽度为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上却不行

有什么帮助吗？

最好的问候

Answer 1

使用第二个代码示例并添加一个新类，以重置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;
}

移动分辨率下的boostrap 4 img-流体Strechs图像

1 个答案: