背景图片在手机屏幕上放大显示 [英] Background image appears zoomed in on mobile screens

问题描述

我正在为学校建设一个项目，但是背景图片有问题.我已使用此代码段进行了此操作( https://css-ricks.com/perfect-full-page-background-image/)，并且在台式机和Chrome开发工具(适用于移动设备)上都可以正常运行.当我在手机上的Chrome或Safari中打开网站时，它无法正常工作.截图如下:

I'm building a project for school, and I'm having issues with the background image. I've used this code snippet to do it (https://css-tricks.com/perfect-full-page-background-image/), and it works fine on desktop and on Chrome Dev Tools (for mobile devices, that is). It doesn't work properly when I open my website on Chrome or Safari on my phone. Screenshots as follows:

Chrome浏览器

手机上的Chrome

这是我在CSS上的代码:

Here's my code on CSS:

.container-hero {
height: 100vh;
width: 100%;
background: url("../images/hero-image.jpg") no-repeat center center fixed;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

}

<div class="container-fluid container-hero">
        <div class="row">
            <div class="col-12">
                <div class="hero-j jumbotron text-center text-uppercase text-white">
                    <div class="container">
                        <h1 class="display-4 section-header">Be a hero.</h1>
                        <hr class="block-divider--white">
                        <p class="hero-j text"> At Doug's, we <strong>Evolve</strong> together.</p>
                        <a href="#signup" class="btn btn-lg button-signup">
                        Sign me up!
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

非常感谢您的帮助！

推荐答案

IOS Safari(因此IOS Chrome)不支持固定背景.请参见 https://caniuse.com/?search=fixed

IOS Safari, and therefore IOS Chrome, does not support fixed on background. See https://caniuse.com/?search=fixed

我用自己的图像尝试了CSS，但效果很模糊.从此声明中删除固定内容很明确.

I tried your CSS with my own image and it was fuzzy. Taking the fixed out of this statement made it clear.

background: url("https://ahweb.org.uk/gear.jpg") no-repeat center center;

在不知道代码的确切布局的情况下，很难知道这是否足够，或者是否必须将图像拿出作为另一个容器的背景，因此在任何情况下它都始终可见是必需的.

Without knowing the exact layout of your code it is difficult to know whether this will be enough or whether you will have to take the image out to be the background of another container so it remains in view at all times if that is what is required.

这篇关于背景图片在手机屏幕上放大显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！