CSS 背景大小：封面不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26236486/
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
background-size: cover not working?
提问by Alex
This is my page http://inogroup.it/preload/index.htm
这是我的页面http://inogroup.it/preload/index.htm
Width of image boxes is responsive
图像框的宽度是响应式的
How to set the height to be responsive too? Like 50% of the screen?
如何将高度设置为响应式？喜欢 50% 的屏幕？
If I do this change:
如果我做这个改变：
.pattern{
background-size: contain;
margin-bottom:25px;
width:100%;
height:50%;
}
it's not working
它不工作
Thank you very much!
非常感谢！
回答by MichaelClark
background-size: needs to come AFTER background: I don't know if this is true of all browsers, but it's certainly a feature of Chrome that can drive you crazy.
background-size: 需要在 background 之后出现：我不知道这是否适用于所有浏览器，但它肯定是 Chrome 的一个功能，可以让你发疯。
回答by kosijer
You need to use background-imageproperty to define background image.
您需要使用background-image属性来定义背景图像。
So this won't work
所以这行不通
<img class="image" style="background: url(image.jpg);" />
<img class="image" style="background: url(image.jpg);" />
.image { background-size: cover; }
.image { background-size: cover; }
because background is the shorthand code and takes default values for all omitted parameters.
因为 background 是速记代码，所有省略的参数都采用默认值。
But if you do this
但是如果你这样做
<img class="image" style="background-image: url(image.jpg);" />
<img class="image" style="background-image: url(image.jpg);" />
.image { background-size: cover; }
.image { background-size: cover; }
This wil solve the problem.
这将解决问题。
回答by Richard Parnaby-King
The height of the div can be set using css heightproperty, or (by default) by the height of it's children elements. As the images are being set as background images the div is unable to determine the height it should be from that, and there is no pure css method of adjusting the height of a div to fit the dimensions of a background image. What you can do, is set the background images to be positioned in the centre of the div and have the background size as cover:
可以使用 cssheight属性或（默认情况下）通过其子元素的高度设置 div的高度。由于图像被设置为背景图像，因此 div 无法确定它应该具有的高度，并且没有纯 css 方法来调整 div 的高度以适应背景图像的尺寸。您可以做的是将背景图像设置为位于 div 的中心，并将背景大小设置为封面：
.pattern-container .pattern {
background-size: cover;
background-position: 50% 50%;
<!-- other rules here -->
}
Positioning the background images as 50% 50%vertically and horizontally centres it in the containing div regardless of the dimensions of the div. That said, the image itself may crop at the edges if the aspect ratio of the div is less than the aspect ratio of the image (e.g. if the div is 30px wide and 10px high, and the image is 40px wide and 10px high, then the image is going to lose 5px from both sides).
50% 50%无论 div 的尺寸如何，将背景图像垂直和水平放置在包含的 div 中。也就是说，如果 div 的纵横比小于图像的纵横比（例如，如果 div 为 30px 宽和 10px 高，并且图像为 40px 宽和 10px 高，则图像本身可能会在边缘裁剪，然后图像将从两侧丢失 5px）。
回答by Lerk
This might be a bit late but in some cases it's necessary to add background-attachment: fixed;to get background-size: cover;working.
这可能有点晚了，但在某些情况下，有必要添加background-attachment: fixed;才能background-size: cover;工作。
回答by Tommy Jinks
The image boxes are responsive, but this does not mean that the corresponding images are. For a more fluid and dynamic structure, I recommend using a framework that does the work for you, like Bootstrap.
图像框是响应式的，但这并不意味着相应的图像是响应式的。对于更流畅和动态的结构，我建议使用为您完成工作的框架，例如 Bootstrap。
In the latest version of Bootstrap you could use the following code to make a responsive image (both in width and height):
在最新版本的 Bootstrap 中，您可以使用以下代码制作响应式图像（宽度和高度）：
<img src="images/my_img" class="img-responsive" />
In order for this to work, you will need to download the latest version of Bootstrap from their website (http://getbootstrap.com/) and reference in your code.
为了使其工作，您需要从他们的网站 ( http://getbootstrap.com/)下载最新版本的 Bootstrap并在您的代码中引用。
