CSS 背景图像 - 缩小以适合固定大小的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39559665/
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 background image - shrink to fit fixed size div
提问by user1187968
I have the following code at https://jsfiddle.net/ncrcfduz, and a background image at https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. I need to make the background image rescale to fit in the div, preferred to show most of the "centered" content in the image. The following code only show the top-left corner of the image.
我有下面的代码https://jsfiddle.net/ncrcfduz，并在背景图像https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg。我需要重新调整背景图像以适应 div，首选显示图像中的大部分“居中”内容。以下代码仅显示图像的左上角。
.container {
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 150px;
width: 300px;
}<div class="container">
</div>回答by henry
You're looking for background-size: contain(see the MDN entry), not cover. To get your example to work, you'll have to drop the background-attachment: fixed. Use background-position: centerto center the background in your div.
您正在寻找background-size: contain（请参阅 MDN 条目），而不是cover. 为了让您的示例工作，您必须删除background-attachment: fixed. 用于background-position: center在您的div.
.container{
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px;
width: 300px;
}<div class="container">
</div>Notes:
笔记：
These days you almost certainly don't need the browser prefixes, meaning you can just use
background-size: contain. See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibilityIf you're using Autoprefixer(included in many build tools and build setups) it will automatically add any necessary prefixed versions for you, meaning you could do
background-size: containeven if current versions of the major browsers still required prefixes.You can include size in the
backgroundshorthand property with the syntaxbackground: <background-position>/<background-size>. That would look like
如今，您几乎可以肯定不需要浏览器前缀，这意味着您只需使用
background-size: contain. 请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility如果您使用Autoprefixer（包含在许多构建工具和构建设置中），它会自动为您添加任何必要的前缀版本，这意味着
background-size: contain即使当前版本的主要浏览器仍然需要前缀，您也可以这样做。您可以
background使用语法在速记属性中包含大小background: <background-position>/<background-size>。那看起来像
.container{
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center/contain;
height: 150px;
width: 300px;
}
回答by Anonoymous
you should use:
你应该使用：
.container{
background-size: 100%;
}
回答by AymericM
You just have to replace "fixed" by "center" on your "background" instruction.
您只需要在“背景”指令中将“固定”替换为“中心”即可。
Like that:
像那样：
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
JSFiddle here: https://jsfiddle.net/ncrcfduz/2/
JSFiddle在这里：https://jsfiddle.net/ncrcfduz/2/
