我正在使用这个 CSS:
.wrap {
max-width:1400px;
min-width:768px;
width:100%;
background-repeat: no-repeat scroll;
background-position: center top;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.image {
width: 100%;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
将图像居中并根据窗口大小对其进行缩放,在 768 像素处停止缩放。当窗口尺寸较大时,我无法显示图像的底部(当窗口最小化时它工作正常)。当我将 .image
类的高度更改为超过 600px 时,它会破坏图像缩放...
这是问题的演示: http://jrbaldwin.com/css_issue/
最佳答案
我认为它没有缩放,因为高度保持固定。例如,将 .image 高度设置为 1000px。它必须将图像放大到 1000 像素,以便它始终填满整个 1000 像素的高度,无论图像的宽度是多少。
可能会尝试:
background-size: 100%; background-repeat: no-repeat;
关于html - CSS:响应式背景图片高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20575050/