html - CSS:响应式背景图片高度

Question

我正在使用这个 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/

Answer 1

我认为它没有缩放，因为高度保持固定。例如，将 .image 高度设置为 1000px。它必须将图像放大到 1000 像素，以便它始终填满整个 1000 像素的高度，无论图像的宽度是多少。

可能会尝试:

background-size: 100%; background-repeat: no-repeat;