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