缩小时如何阻止背景移动

How can I stop background from moving when zooming out?

本文关键字：背景 移动 何阻止 小时 缩小      更新时间：2023-09-26

当浏览器处于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>

这是因为您使用的是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}
}
相关文章：