CSS 如何使标题图像响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10762610/
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
How to make Header image responsive?
提问by xyz
I have added a header image to my site with:
我在我的网站上添加了一个标题图片：
#header_area {
background: url('my_header_image.com');
background-repeat:no-repeat;
background-position: top center;
}
My site is responsive except the Header.
我的网站是响应除了标题。
Is there a way to make my header responsive?
有没有办法让我的标题响应？
回答by Gavin Anderegg
When making a background-image responsive, you can use the background-sizeproperty. In the case of the above code, so long as your #header_areaelement has an implicit width (or an explicit one set with media queries), you should be able to say:
在使背景图像响应时，您可以使用该background-size属性。在上述代码的情况下，只要您的#header_area元素具有隐式宽度（或带有媒体查询的显式宽度），您就应该能够说：
#header_area {
background: url('my_header_image.com');
background-repeat:no-repeat;
background-position: top center;
background-size: 100%;
}
