Question

当浏览器处于100％时，后方图像非常棒。即使缩小50％，他们仍然可以。但是当你继续缩小到25％时，背景图像位置会坍塌或“隐藏”，我希望图像的背景位置：中心顶部保持完整，无论最小化还是最大化。

我附上了一个例子：

http://i65.tinypic.com/k1e54z.jpg

您还可以访问www.medshopandbeyond.com并在浏览器中缩小以查看正在发生的情况。 [顺便说一句：我知道照片中的语法错误:)]

唯一一个足够接近我想要的是背景尺寸：包含但是如果将图像设置为此

，则图像不再是从屏幕到屏幕的全宽度

#header-image4 {
  
    background-image:url("{{ 'old-friends-555527_19201.jpg' | asset_url }}"); 
    height: 750px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: -50px;
    background-size: cover;
    width: 100%;
    margin-top: -10px;
    
}

<div id="header-image4"></div>

Answer 1

这是因为您正在使用background: cover和固定高度。当您缩小时，您的高度保持不变，但宽度会增加，background: cover将展开以填充该宽度，这就是您获得异常裁剪的原因。如果您在大型显示器上拉出浏览器窗口的宽度，则可以看到同样的问题。

就个人而言，我会在不同的断点处为div创建不同的高度，例如

@media screen and (max-width: 1920px){
    #header-image4{height: 1000px}
}
@media screen and (max-width: 2560px){
    #header-image4{height: 1500px}
}

如何在缩小时停止移动背景？

1 个答案: