html - 如何去除图像两边的空白区域？

Question

我正在尝试去除图像周围的空白区域，该区域位于引导列内。

我已经设法在桌面上使用左右边距上的 -1rem 解决了这个问题。我试过将 body margin 和 padding 设置为 0，以及弄乱容器、行和图像的流体 Bootstrap 设置。

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 作为 objective-c SS 标签时存在一些全局命名问题。

旧的:

<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;
}

<罢工>

Answer 1

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