当我放大时背景图像剪切答案

【问题标题】：Background image Cut when I do Zoom In当我放大时背景图像剪切
【发布时间】：2019-09-11 11:28:00
【问题描述】：

我正在使用bootstrap 3.3.7 开展一个项目。我在首页上有一张背景图片。

图像在我的计算机中完美显示，例如： 。

但是当我放大这张图片时，从顶部和底部剪切：

HTML代码是：

<div class="bg-img">
    <div class="container" style="color:#fff;padding: 56px 0 85px 0px">
        <h1 class="container" style="font-size:51px;font-weight:600;margin-bottom:30px;">Work Different</h1>
        <div class="row container" style="margin-bottom:12px;">
            <p class="col-md-3" style="width:29%">Provide your organization a powerful work execution platform that offers exceptional speed to business value — so you say yes to more ideas, more customers, and more revenue.</p>
            <p class="col-md-9"></p>
        </div>
        <br>
        <br>
        <div class="container"><a class="btn nav-btn-green" href="/SignUp">Try Risk Hippie for Free</a></div>
    </div>

</div>

我的背景图片 CSS 样式是：

   .bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/img/newbackground.png);
    margin-top:-9px;
    -webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), inset 567px 0 170px -25px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), inset 567px 0 170px -25px rgba(0, 0, 0, 0.45);
    box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), inset 567px 0 170px -25px rgba(0, 0, 0, 0.45);
}

当我放大浏览器时，图像没有响应。

【问题讨论】：

正常，因为 background-size 是cover
请分享您的代码
@Alex 我尝试了background-size 的所有选项。

标签： html css twitter-bootstrap-3

【解决方案1】：

我认为你用“auto”指定背景图像的大小

.bg_img{
        background-size: auto;
    }

【讨论】：

使用auto 它比以前切割的图像更多。谢谢

【解决方案2】：

可能的尝试：

.bg_img{
    background-size: 100%; background-repeat: no-repeat;
}

【讨论】：