Html CSS：响应式背景图像高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20575050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Responsive background image height
提问by alyx
I'm using this CSS:
我正在使用这个 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;
}
To center an image and scale it based on window size, stopping the scaling at 768px. I can't display the bottom part of the image when the window is at a larger size (it works fine when the window is minimized). When I change the height of the .imageclass to more than 600px, it breaks the image scaling...
要将图像居中并根据窗口大小对其进行缩放，在 768 像素处停止缩放。当窗口尺寸较大时，我无法显示图像的底部（当窗口最小化时它工作正常）。当我将.image类的高度更改为超过 600 像素时，它会破坏图像缩放...
Here's a demo of the problem: http://jrbaldwin.com/css_issue/
这是问题的演示：http: //jrbaldwin.com/css_issue/
回答by jtlowe
I think it's not scaling because the height is staying fixed. For example, set the .image height to 1000px. It has to enlarge the image to cover 1000px so it fills the entire 1000px height at all time, no matter what width the image is.
我认为它没有缩放，因为高度保持固定。例如，将 .image 高度设置为 1000px。它必须放大图像以覆盖 1000 像素，以便它始终填充整个 1000 像素的高度，无论图像的宽度是多少。
Possibly try:
可能尝试：
background-size: 100%; background-repeat: no-repeat;
背景尺寸：100%；背景重复：不重复；
回答by Lasse
Building on @jtlowe's answer, couldn't you achieve the right effect by using background-size: containinstead?
以@jtlowe 的回答为基础，您不能通过使用background-size: contain来达到正确的效果吗？
Since you're already firmly in the CSS3 domain, you can optionally create a media query that uses coverin smaller size windows.
由于您已经深入 CSS3 领域，因此您可以选择创建一个cover在较小尺寸窗口中使用的媒体查询。
回答by Mr. Mayers
Use background-size: contain instead of cover.
使用 background-size: contains 而不是 cover。
回答by Slawa Eremkin
Try this styles:
试试这个样式：
.image{
width: 100%;
height: 600px;
max-height: 1000px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
max-height: 1000px;
}
The main idea is to use "contain" property
More information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
主要思想是使用“包含”属性
更多信息：https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
