CSS background-image 在移动浏览器上被扭曲和放大答案

【问题标题】：CSS background-image is distorted and zoomed in on mobile browsersCSS background-image 在移动浏览器上被扭曲和放大
【发布时间】：2020-03-08 13:22:02
【问题描述】：

我的网站上有两张背景图片，均使用 CSS。初始登录页面图像在桌面和移动设备上都可以完美运行，但是第二个在 Safari 中失真。我已经尝试了我在网上找到的所有解决方案，但没有任何效果。

着陆图像最初是失真的，但我在网上找到了一个解决方案，效果很好，如下（以防万一）：

'''
    <div class="home-wrap">
        <div class="home-inner">
        </div>
    </div>
'''

'''
.home-wrap {
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
}
  .home-inner {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute; 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
    z-index: -100;
    max-width: 100%;
    overflow-x: hidden;
}
@media only screen and (max-width: 767px) {
    .home-inner {
      background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../images/bgmob.jpg'); 
      background-size: cover;
      background-attachment: scroll;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      height: 100%;
      position: fixed; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      background-color: black;
      overflow-x: hidden;
    }
 }
'''

下面是第二张失真的背景图：

'''
    <div class="bg-wrap">
        <div class="fixed-background">
        </div>
    </div>
'''

'''
.bg-wrap{
    position: relative; 
    height: 100%;
    width: 100%;
}
.fixed-background {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/bg2.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; 
    position: relative; 
    margin-bottom: 0; 
}
@media only screen and (max-width: 767px) {
    .fixed-background {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/bg2mob.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: scroll;
        position: fixed; 
        height: 100vh;
        overflow-x: hidden;
    }
 }
'''

我知道 Safari 移动浏览器对背景图像的响应不佳，但我认为如果我让第一个可以工作，那么第二个也应该可以工作。我觉得这可能与职位有关。我还有更小、更适合移动浏览器的图像，这些图像在上述媒体查询中可见。我已经尝试了无数的解决方案，所以这是我最后一次绝望的尝试。

【问题讨论】：

并不是说定位不是问题（查找相对和绝对定位），但失真来自您同时设置高度和宽度的事实。如果您设置一个或另一个（在大多数情况下，高度最适合桌面上的移动宽度）封面应该允许它正确调整大小。也尝试使用 vh(viewport height) 和 vw(viewport width) 而不是 % on height 或 width
谢谢，我改成just height: 100vh;但是图像仍然是相同的。

标签： html css iphone

【解决方案1】：

您是否尝试过删除background-size: cover;？因为这会拉伸图像以填满整个 div。

【讨论】：