响应式网页设计：“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小”？

Posted 2023-03-06

【中文标题】响应式网页设计：“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小”？

【英文标题】：Responsive web design : "How to resize a background image according to browser window size using CSS"?

【发布时间】：2011-12-01 10:25:56

【问题描述】：

我正在创建一个网站，我的所有产品图像都将根据浏览器窗口大小重新调整大小，因此 我写了一些媒体查询，其中我使用了一张大图像并将其调整为不同的窗口大小，但是强> 我有一张我在背景中使用的图像，我如何重新调整它的大小？我希望在 IE7 和 8 的所有浏览器中都支持它。

HTML

<div></div>

CSS

div 
background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png") 
no-repeat scroll 0 0 transparent;
position:absolute;
width:45px; 
height: 45px; 

我的实时代码在这里：-http://jsfiddle.net/jamna/DdxbQ/19/ 这里我有一个主要的“产品图像”，现在根据浏览器窗口大小调整大小（在我的小提琴中，我还没有编写调整产品图像大小的代码，我只是显示我现在要调整的图像大小）但我有另一个“省钱标签”图像，它位于“跨度”的背景中，我想与产品图像同时调整大小。

【参考方案1】：

为此，您可以使用background-size 属性

喜欢：

body
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;

还有其他属性，例如 contain 和 100% 100%

查看此链接http://css-tricks.com/3458-perfect-full-page-background-image/

对于 IE，你可以使用filter

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

编辑： 您的实时代码是正确的，但是您可以像这样以百分比定义宽度和高度

http://jsfiddle.net/sandeep/ayUKz/3/

&你也可以使用img标签http://jsfiddle.net/sandeep/RMGnM/

img
position:absolute;
width:100%;
height: 100%

编辑：

也许这就是你想要的http://jsfiddle.net/sandeep/DdxbQ/20/

也检查此链接http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

【讨论】：

我也想在 IE7 和 8 的所有浏览器中都支持它

@jitendra;它支持所有浏览器接受 IE 的 IE 你可以使用过滤器

只是一个小提示：我注意到谷歌浏览器在使用 background-size: cover 属性时存在问题：它使滚动非常跳跃。当使用 jQuery 插件（例如srobbin.com/blog/jquery-plugins/jquery-backstretch）时，这个问题消失了，滚动又变得流畅了。

@andrej; chrome 使用 background-cover 属性没有问题检查此链接ringvemedia.com 他们使用 background-cover 属性

@sandeep thx for link 我看到了，真的很好......对不起，如果你没有让我正确......我有一个 div 并且有一个图像我想要同时实现，根据浏览器宽度或大小见这里jsfiddle.net/jamna/DdxbQ/19