2011-04-19 76 views
1

我想在iframe中嵌入图像,其大小不确定。 我试着如下,但它似乎并没有工作。
请让我知道如何继续。身体自动调整大小的css图像背景

我真正想要做的是,图像应该自动适合页面。图像比页面小,所以当我删除不重复的图像的多个实例都可以在屏幕上看到。

请帮忙谢谢。

body{ 
      background-image:url(someimageurl); 
      width:1400px; 
      height:1600px; 
      background-repeat:no-repeat; 

     } 
+1

将宽度和高度设置为100%的''如何?你真的想用CSS来做吗? – 2011-04-19 12:02:17

回答

3

罗丹是支持正确的轨道。在纯CSS中,你只能使用CSS3来完成,而只有最新版本的浏览器才能工作。但是,您可以通过将绝对定位的图像放在页面的角落并将宽度和高度设置为100%来伪造它。然后一些z-index工作将内容放在图像的顶部。

的HTML:

<img class="background" /> 
<div class="wrapper"> 
content goes here 
</div> 

的CSS:

img.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index} 
div.wrapper{position:relative;z-index:1;} 

见这里 - http://jsfiddle.net/snkg8/ 仅供参考 - 在IE6没有一些额外的CSS黑客这是不行的,但我不麻烦IE6了。

2

您有后台大小CSS属性:

background-size: 100%; 

不幸的是,这是一个CSS3属性,只有在最新的浏览器(IE9,Firefox4)

0

通过使用CSS3,

html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

这适用于所有的浏览器和IE9 +。 以下过滤器也适用于ie7和ie8。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";