使用CSS调整div中的背景图片大小 [英] Resize background image in div using css

问题描述

下面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  ; 
  

更新

1. background-size：cover;

2. background-size：contain;


这里是关于jsfiddle的所有三个可能性的演示
$ b

DEMO

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.

1. background-size: cover; - the background image is completely covering the element (image can be cut off)
2. background-size: contain; - the image is streched without cutting it

Here is a demonstration on jsfiddle for all three possibilitites

DEMO

这篇关于使用CSS调整div中的背景图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！