缩小时如何阻止背景移动？

Question

当浏览器处于 100% 时，背面图像很棒。即使缩小 50%，它们仍然没问题。但是当您继续缩小到 25% 时，背景图像位置会折叠或 "hides"，我希望图像的背景位置：中心顶部保持不变，无论是最小化还是最大化。

我附上了一个例子：

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

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

唯一一个足够接近我想要的是 background-size:contain 但是，如果将其设置为

，图像将不再是屏幕之间的全宽

#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 将扩展以填充该宽度，这就是为什么您会得到不寻常的裁剪。如果在大显示器上拉出浏览器的宽度 window，也会出现同样的问题。

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

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

缩小时如何阻止背景移动？

How can I stop background from moving when zooming out?

html

javascript

css

jquery

zooming