Question

我现在正在搜索这个并搜索出来，但是没有得到满意的解决方案。

我有一个aspx页面，正文的背景属性有一个像。图像尺寸为3000 X 2000像素。因此，在渲染页面时，图像不能正常显示并且因为它没有根据窗口的大小（或更准确地说是屏幕的分辨率）调整自身的大小而变得臃肿。如何调整背景图像的大小以使其完全符合浏览器窗口大小而不会出现裁剪或膨胀？

可以设置CSS或使用jquery / javascript。

任何指针都会非常棒!!!

Answer 1

我敢打赌，这对你有用。我也很难找到这方面的答案并且遇到了这个页面 - ＆gt; css-tricks.com

然后我尝试使用页面上提供的代码，它完美地运行。 :)。

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

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

Answer 2

CSS3中有一个名为“background-size”的背景的新属性

试试这个：

    <html>
       <head>
          <title>Background-Image Test</title>
          <style>
             body {
                background-image: url(./3840x1200.jpg);            
                background-size: 100%;
                background-origin: content;
                background-repeat: no-repeat;
             }
          </style>
       </head>
       <body>
          <!-- your content here -->
       </body>
    </html>

您可以在此处找到有关CSS背景属性的更多信息： http://www.w3.org/TR/css3-background/

希望这会有所帮助：）

编辑：将工作草稿中的链接更改为最终版本;）

Answer 3

请参阅this SO question，它谈到将图片拉伸到窗口大小的100％。

Answer 4

background-image永远不会调整大小。（除非您使用新的background-size，which only newer browsers (CSS3) support）

你可以做的是在你的content-div下面放一个缩放div，然后将你的图像添加为<img>，并进行适当的缩放。

<div style="position:absolute; background:#cccccc; width:100%; height:40px;">bg</div>
<div style="position:absolute;">content</div>

如何在aspx页面中调整body的背景图像

4 个答案: