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

要使图像居中并根据窗口大小进行缩放，请将缩放停止在768px。当窗口尺寸较大时，我无法显示图像的底部（当窗口最小化时，它可以正常工作）。当我将.image类的高度更改为600px以上时，会破坏图像缩放...

以下是问题的演示： http://jrbaldwin.com/css_issue/

Answer 1

我认为这不是缩放因为高度保持固定。例如，将.image高度设置为1000px。它必须放大图像以覆盖1000px，因此无论图像宽度如何，它都可以随时填充整个1000px的高度。

可能尝试：

background-size：100％; background-repeat：no-repeat;

Answer 2

在@ jtlowe的答案基础上，使用background-size: contain代替你无法达到正确的效果吗？

由于您已经牢牢占据CSS3域，因此您可以选择创建在较小尺寸窗口中使用cover的媒体查询。

Answer 3

使用background-size：包含而不是封面。

Answer 4

试试这个样式：

.image{
  width: 100%;
  height: 600px;
  max-height: 1000px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-height: 1000px;
}

主要思想是使用“包含”属性
更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

CSS：响应式背景图像高度

4 个答案: