本文介绍了使用CSS调整div中的背景图片大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
下面css在两个div上设置单独的背景;如果图像不适合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>
解决方案
您可以使用CSS属性
background-size:100%100%> background-size
;
更新
-
background-size:cover;
background-size:contain;
这里是关于jsfiddle的所有三个可能性的演示
$ b
Below css sets an individual background on two divs; the images repeat themselves if they do not fit into the div size.
How can I stretch the images using css to fit into space required by 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>
解决方案 You can use the CSS property background-size
which is available since CSS 3:
background-size: 100% 100%;
Update
If you want to preserve aspect ratio, there are two more possibilities.
background-size: cover;
- the background image is completely covering the element (image can be cut off)background-size: contain;
- the image is streched without cutting it
Here is a demonstration on jsfiddle for all three possibilitites
DEMO
这篇关于使用CSS调整div中的背景图片大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!