Html 使用css在div中调整背景图像的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6028737/
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
Resize background image in div using css
提问by user701254
Below css sets an individual background on two divs; the images repeat themselves if they do not fit into the div size.
下面css在两个div上设置一个单独的背景；如果图像不适合 div 大小，它们会重复。
How can I stretch the images using css to fit into space required by div ?
如何使用 css 拉伸图像以适应 div 所需的空间？
<style type="text/css">
#contentMain {
margin-bottom: 5%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
background: url( /jQuery/mypage/img/background1.png )
}
#page1 {
background: url( /jQuery/mypage/img/background2.png )
}
</style>
回答by Alp
Answer
回答
You have multiple options:
您有多种选择：
background-size: 100% 100%;- image gets stretched (aspect ratio may be preserved, depending on browser)background-size: contain;- image is stretched without cutting it while preserving aspect ratiobackground-size: cover;- image is completely covering the element while preserving aspect ratio (image can be cut off)
background-size: 100% 100%;- 图像被拉伸（可能会保留纵横比，具体取决于浏览器）background-size: contain;- 图像在保持纵横比的同时被拉伸而不切割background-size: cover;- 图像完全覆盖元素，同时保留纵横比（图像可以被截断）
/edit: And now, there is even more: https://alligator.io/css/cropping-images-object-fit
/edit：现在，还有更多：https: //alligator.io/css/cropping-images-object-fit
Demo on Codepen
Codepen 上的演示
Update 2017: Preview
2017 年更新：预览
Here are screenshots for some browsers to show their differences.
以下是一些浏览器的屏幕截图，以显示它们的差异。
Chrome
铬合金
Firefox
火狐
Edge
边缘
IE11
IE11
Takeaway Message
外卖留言
background-size: 100% 100%;produces the least predictable result.
background-size: 100% 100%;产生最不可预测的结果。
Resources
资源
回答by Bram B
i would recommend using this:
我建议使用这个：
background-repeat:no-repeat;
background-image: url(your file location here);
background-size:cover;(will only work with css3)
hope it helps :D
希望它有帮助：D
And if this doesnt support your needs just say it: i can make a jquery for multibrowser support.
如果这不支持您的需求，只需说出来：我可以为多浏览器支持制作一个 jquery。
回答by Quentin
With the background-sizeproperty in those browsers which support this very new feature of CSS.
在那些支持 CSS 新特性的浏览器中使用background-size属性。
