时间戳

首页 > 解决方案 > 已解决 - 如何去除图像两侧的空白？

html - 已解决 - 如何去除图像两侧的空白？

问题描述

我正在尝试摆脱图像周围的空白空间，该空间位于引导列内。

我已经设法在左右边缘使用 -1rem 解决了桌面上的问题。我尝试将正文边距和填充设置为 0，以及弄乱容器、行和图像的流体引导设置。

JSX/HTML。

<React.Fragment>
    <div className="conatiner-fluid bg">
        <div className="row"
            <div className="col-lg-6 col-md-6 col-sm-12">
                <img classname="img-fluid" src={...}></img>
            </div>
            <div className="rightSide col-lg-6 col-md-6 col-sm-12 mt-5 text- 
             centered">
                <h1 className="display-4 text-center">Hello, world!</h1>
                <p className="lead">More text</p>
                <p>even more text</p>
            </div>
        </div>
    </div>
</React.Fragment>

的CSS。

.rightSide {
    background: black;
    color:white;
.bg {
    background: black;

.img-fluid {
    margin-right: -1rem;
    margin-left: -1rem;
}

我现在遇到的问题是修复移动设备上的外观。它现在拥抱页面的左侧，右侧有一个大的空白区域。图像为 960x1080。非常感谢任何帮助甚至建议。谢谢！

编辑：将 p-0 添加到图像的 div 容器中，然后去掉左右边距上的 -1rem 解决了这个问题。另一个问题是使用 img-fluid 作为目标 CSS 标记时存在一些全局命名问题。

老的：

<div className="col-lg-6 col-md-6 col-sm-12">
    <img classname="img-fluid" src={...}></img>
</div>

.img-fluid {
    margin-right: -1rem;
    margin-left: -1rem;
}

新的：

<div className="col-lg-6 col-md-6 col-sm-12 p-0">
    <img classname="img-fluid" src={...}></img>
</div>


.img-fluid {
    margin-right: -1rem;
    margin-left: -1rem;
}

标签： htmlcssreactjsmobilebootstrap-4

解决方案

G-Cyr 是正确的。容器 div 上的 p-0 并去掉左右边距上的 -1rem 解决了图像上的填充问题。其他样式问题是由 CSS 样式的命名引起的。img-fluid 也在另一个文件上被操纵。必须学习更好的命名习惯哈哈。谢谢G-Cyr！

推荐阅读