在移动设备上运行网站时图像大小混乱

Question

所以我想在一些文本后面显示一张图像。当我在桌面浏览器上打开该网站时，它工作正常。即使从控制台进入移动模式也不会出现任何问题。然而，部署网站后，当我在实际的移动设备上打开它时，图像被拉伸了。

我尝试将宽度和高度设置为自动，并允许最大宽度为 100%，但以其他方式搞砸了图像。

这就是它在桌面上的显示方式。 这是在 Chrome 控制台中手机模式下的显示方式 但这就是它在实际移动设备上的显示方式

HTML

<div class="row d-flex text-center justify-content-center pb-4 footerWithImage">
            <div class="row mt-4 d-block text-white col-lg-5">
                <!-- Content -->
                <h6 class="text-uppercase font-weight-bold">Carson Moore Fitness</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <p>Helping clients build muscle, burn fat and improve posture using safe and effective,
                    personalized fitness programs.</p>
            </div>
            <div class="row mt-4 d-block text-white col-lg-5 footerContacts">

                <!-- Links -->
                <h6 class="text-uppercase font-weight-bold">Contact</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <br>
                <a href="https://g.page/sandcastlefitnessclub-24hrs?share"><i class="fas fa-home mr-3"></i>White Rock,
                    Surrey, BC</a><br>
                <a href="mailto:[email protected]?Subject=Hello%20again" target="_top"><i
                        class="far fa-envelope mr-3"></i>&nbsp;[email protected]</a><br>
                <a href="tel:[phone]"><i class="fas fa-phone mr-3"></i>[phone]</a>
                <div id="socialMediaLinksDiv">
                </div>
            </div>
        </div>

CSS

.footerWithImage {
    background: url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 20%;    
}

注：已解决。看我的答案

Answer 1

您将需要使用媒体查询来定位该图像，以指定您想要在移动设备上的大小。

Answer 2

确保将

!important

放在

background

样式之后，因为许多浏览器/框架会覆盖您的自定义样式，例如

background-size: cover;

.footerWithImage {
    background: url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3");
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 20% !important;    
}

阅读更多这里

Answer 3

我再次将其发布在这里，以便人们可以更多地看到它，但 Singh Raman 的解决方案效果很好，我为此苦苦挣扎了很长时间，谢谢！

@media only screen and (max-device-width: 1366px) {     
.footerWithImage {      
   background-attachment: scroll;} 
}

这对我来说非常有效！