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

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}
}