如何：可调整大小的背景图像

如果您正在寻找如何进行全屏背景图像，请点击此处。

我的朋友 Richard 最近向我提出了一个简单的 CSS 问题

有没有办法使背景图像可调整大小？就像，用图像填充网页的背景，无论浏览器窗口的大小如何。同时，让它随着浏览器窗口的变化而变大或变小。同时，确保它保持其比例（不会奇怪地拉伸）。同时，不要产生滚动条，如果需要，只需垂直裁剪。同时，在页面上作为内联 <img> 标记出现。

哇，这是一个很高的要求。我的第一个想法是……嗯，没有。但这当然正是我喜欢的那种挑战，所以我开始思考。最终，我找到一个非常好的解决方案，我们把它变成了一个非常棒的小项目。首先，查看完成的项目，然后我将向您展示它是如何完成的

完成的项目： ~~天气如何？~~ 离线

resizeablebackgroundimage

继续调整您的浏览器窗口，并注意图像将如何调整大小以适合。它不会“动态”地进行，但它确实有效。它也满足了所有其他要求：没有滚动条，并且保留了像素比例。

第一次尝试

嗯，我的第一个想法是，这确实需要是一个 CSS 背景图像。如果图像足够大，它将填充屏幕边缘到边缘。它也可以居中，所以我认为这已经足够好了。较大的浏览器窗口将显示更多图片，较小的窗口将显示更少的图片。如果应用于 body 标签，它将很好地填充屏幕，不会出现滚动条。我认为这是一个相当好的解决方案，即使它不是技术上可调整大小的，因为您不能设置 CSS 背景图像的大小。以下是我的第一次尝试方法。

<head>
	....
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() { 
		$("img.source-image").hide();
		var $source = $("img.source-image").attr("src");
		$('#page-body').css({
			'backgroundImage': 'url(' + $source +')',
			'backgroundRepeat': 'no-repeat',
			'backgroundPosition': 'top center'
		});
	}); 
	</script>
</head>
<body id="page-body">
	<img class="source-image" src="images/image.jpg" alt="" />
</body>

你猜对了，jQuery。上面的代码将隐藏页面上的图像，但会获取它的“src”属性并将其作为背景应用于 body 元素（通过其唯一的 ID“page-body”）。查看一个实际操作的示例。

第二次尝试（更好）

虽然第一次尝试做得不错，但它在最基本层面上失败了：它不是“可调整大小的”。所以是时候进行另一次尝试了。为了控制显示在屏幕上的图像大小而不改变文件本身，就是使用 <img> 标签将其内联显示。使用 img 标签，我们可以设置“width”和“height”属性来控制图像的大小。如果我们能获取浏览器窗口的精确像素宽度，我们就可以在图像的 width 属性中使用该数字并控制其大小，同时保留比例。

我们可以再次使用 jQuery 和尺寸插件来获取浏览器窗口的宽度。然后，我们将使用该数字来设置图像的 width 属性，我们将为其提供一个唯一的类名“source-image”。我们需要在 DOM 准备就绪时立即执行此操作，这样它会在图像开始加载之前发生。我们也可以在窗口调整大小的任何时候执行此操作（FTW）。以下是操作方法

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.js"></script>
<script type="text/javascript">
	$(document).ready(function() { 
		var $winwidth = $(window).width();
		$("img.source-image").attr({
			width: $winwidth
		});
		$(window).bind("resize", function(){ 
			var $winwidth = $(window).width();
			$("img.source-image").attr({
				width: $winwidth
			});
		 });
	}); 
</script>

为了让这个内联图像更像背景图像，我们可以使用应用于它的唯一类名来应用一些绝对定位。

img.source-image {
	position: absolute;
	top: 0;
	left: 0;
}

由于这种绝对定位，您想要放在它上面的任何内容也需要定位和更高的 z-index 值。如果您的源图像特别高，或者您的浏览器窗口特别宽，图像很容易比您的浏览器窗口更高并强制出现垂直滚动条。为了防止这种情况，只需将 body 上的 overflow 值设置为 hidden

body {
  overflow: hidden;
}

第三次尝试（最佳）

忘记这个 javascript 业务吧！由于 Anders 的评论指出了 Stu Nicholls 的版本，这里有一个更好的方法来处理它，而无需任何 javascript！

由于我们已经在图像上拥有一个唯一的类名，图像已使用绝对定位，并且滚动条问题已解决，那么我们只需使用百分比直接在 CSS 中设置宽度

#img.source-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

查看实际操作的演示。这是迄今为止最好的解决方案，因为调整大小是动态发生的，以获得流畅的感觉，并且不依赖于任何 javascript。

关于 WhatsTheWeather.net 的更多信息

我只为 ~~天气如何~~ (2013 年 11 月更新：现已离线) 做了简单的设计，但 Richard 做了所有很酷的编码才能使其正常运行。据我了解，它是一系列 3 个不同的 API。它首先获取您的 IP 地址并使用 API 将其转换为城市和州。然后它使用一些天气 API 来获取当前天气。然后它使用 Flickr API 来获取与天气相匹配的标签的随机图像。如果它无法获取您的邮编，它会要求您提供，就像在 iPhone 上一样（它也会自动检测并进行略微不同的处理）。所有这些都使用 Ruby on Rails 完成。相当花哨的舞蹈！

bolo

# 2008 年 5 月 15 日

好东西！

“天气如何”在 IE6 中呈现了奇怪的蓝色 img 边框，我认为它只是缺少 border=”0″ 标签？

Anders

# 2008 年 5 月 15 日

很酷的东西！

顺便说一下，这是一个纯 css 实现。

Anders

# 2008 年 5 月 15 日

哦，我忘记了一些东西：http://www.cssplay.co.uk/layouts/background.html

Chris Coyier

# 2008 年 5 月 15 日

感谢 Anders！我已更新文章以包括该解决方案，我认为它仍然是最好的。

Jay

# 2008 年 5 月 15 日

比弗顿，你在网上从未见过这个。那么，你在哪里，波特兰还是威斯康星州？

Chris Coyier

# 2008 年 5 月 15 日

@Jay：我现在在波特兰。我的 IP 解析到比弗顿有点无聊 =P

# 2008 年 5 月 17 日

天气如何？有一个小小的 JavaScript 错误

haha 未定义

该行是

var $winwidth = $(window).width();haha

Jake-DesignerFied

# 2008 年 5 月 17 日

哇，我真的很喜欢那个网站 Chris，做得好。我就在河对岸，我不敢相信这里竟然有 95 度！天气真疯狂！

PS……我喜欢 css-tricks 页脚！

Chris Coyier

# 2008 年 5 月 17 日

@NA：感谢您发现这一点。看起来像一个随机的打字错误……已修复。

@Jake：真的，兄弟。今天真热！

Roberto

# 2008 年 5 月 19 日

很酷！但是您应该包括一种方法来检查窗口是否比图像更高以再次调整大小并消除出现在其中一些图像下方的空白区域。我想这意味着要以像素设置 height 属性，然后应用一些数学运算来计算宽度并保持恒定的比例。

无论如何，效果非常棒。

Karl Hardisty

# 2008 年 5 月 19 日

很棒。

简单。

优雅。真正意义上的优雅。我之前一直在寻找类似的东西，但我退而求其次，使用了更大的图像，并使用 overflow: hidden 来保持页面的结构（即使不是整个图像）。

谢谢。

Sander Aarts

# 2008 年 5 月 20 日

对于您的天气页面来说可能并不重要，但对 body 设置 overflow: hidden; 会导致 Firefox 在您想要打印比一张纸更大的页面时出现问题。由于内容超出纸张，只会打印第一张纸。第二张纸可能会包含多一行，但其余部分将为空。
在大型块元素（不仅仅是 body）上使用 overflow: hidden; 时需要注意这一点。

Karl Hardisty

# 2008 年 5 月 20 日

Sander，

感谢您的提醒。我们已经注意到这个问题并一直在寻找解决方案（目前还没有成功）。

此致,

Karl

Matijs

# 2008 年 5 月 21 日

您可能需要确保图像的比例至少为 4:3，以消除图像下方不必要的空白... 并且确保如果图像的底部被裁剪掉，没有任何重要的内容丢失 :)

Jermayn Parker

# 2008 年 5 月 21 日

我真的很喜欢获取天气的脚本... 我正在为 WotUThink.com 寻找类似的东西。

Alex Moyler

# 2008 年 5 月 22 日

我在我的临时登入页面上也有类似的东西，因为它只是用于整理我的工作的大型 CSS 居中图像，这几乎产生了相同的效果。

tudor

# 2008 年 6 月 18 日

这取决于您图像中焦点的中心位置。
我用
top:0;
替换为
bottom:0;
感谢您的小教程。

Eric

# 2008 年 7 月 6 日

那么，IE6 怎么办？真可惜人们仍在使用这款绝对糟糕的浏览器，但我有一个客户需要一个可调整大小的动态背景图像，而且他们的访客 *仍然* 使用 IE6。IE < 6 幸运的是，只占访客的不到百分之一，所以我不用担心 *那个* 浏览器。

storm

# 2008 年 7 月 17 日

太棒了。

关于 whatstheweather 的一件事... 您能检测到哪些国家使用摄氏度/公制（比如我们澳大利亚）而不是英制（默认）并相应地更改温度信息吗？它正确地找到了我的城市（珀斯，西澳），但现在天气并不“轻微多云”（有雷暴和大雨），而华氏度对我来说毫无意义。检测到该城市是否位于公制国家后，您可以将华氏度转换为公制。

无论如何，喜欢这个概念证明。我认为要过一段时间，我们才能拥有足够快的互联网速度来使用它。

bva_admin

# 2008 年 7 月 24 日

您好,

很棒的技术！我想知道，是否有办法将类似的技术应用到一个块或列上？

感谢您

victoria froud

# 2008 年 7 月 25 日

哦，Chris，我找了你这么久。我正在 DW 中构建一个网站，其中使用 PS 绘制了图像。我想将它们用作每个页面的背景，并且我需要它们像天气一样紧贴在页面上，除此之外没有其他方法可以实现。问题是我不精通代码，也不理解你是否删除了前三行代码而选择了最后一行代码？如何在 DW 中将其导入，通过页面属性吗？我已经尝试过各种方法在 PS 中进行调整大小，但这都是猜测，要么太大导致开始平铺，要么太小出现白色边框。我非常渴望继续进行，但我无法理解你使用代码时的意思。我真的需要帮助。谢谢 Vicky。

victoria froud

# 2008 年 8 月 5 日

您好，Chris，感谢您的代码。我实际上已经成功地使用它了，虽然仍然存在白色边框。我想我现在需要调整图像大小以适合页面。我已经下载了页面尺寸插件，但我正在努力理解如何使用。只能继续努力了。
谢谢 Vicky。

Stacey

# 2008 年 8 月 6 日

您好！

在 WordPress 主题中实现这种效果是否可行？我已经尝试过了，但对我不起作用...

感谢您！

Tom

# 2008 年 9 月 5 日

Chris,

您的网站很棒，对我帮助很大 - 不仅帮助我弄清楚如何做，也帮助我了解了在浏览器窗口中有哪些可能性，而我以前从未想过。我迫切需要您的帮助，因为它与可调整大小的背景图像有关 - 希望您能看到我的评论。

您在这里提出的解决方案很棒，但我希望它具有更大的比例意识 - 也就是说，我希望背景图像像您在这里所做的那样按比例调整大小，但在用户将窗口压缩为比宽度长得多的长度时停止调整大小。如果用户使用您在本篇文章中提出的解决方案进行操作，您会在图像下方得到空白，而我不想这样做。这是一个完全按照我想要的方式工作的 Flash 网站（尽管背景是视频而不是静止图像）

http://www.gudrungudrun.com/#/women/womenSpring/

看看背景是如何调整大小的，但在达到一定的宽高比时，它会停止调整大小，以便图像继续填充窗口？我认为此功能包含在名为“swfforcesize.js”的 JavaScript 文件中，但我对 JavaScript 不够精通，无法解析出这里实际发生的事情。

您知道如何为非 Flash 背景复制此功能吗？您能提供的任何帮助将不胜感激。

感谢您。再次感谢您的网站，它太棒了。

Chris Coyier

# 2008 年 9 月 5 日

我认为答案在上面的某个地方，是对 #2 的某种修改。与其只是将图像的宽度设置为浏览器窗口的宽度，不如将其设置为两侧中最长的那个（宽度或高度）。因此，无论如何，宽度始终是最长的，永远不会产生空白。

Tom

# 2008 年 9 月 5 日

谢谢，我会试试的！

boom

# 2008 年 9 月 17 日

感谢分享，对我来说非常有用。
也许我会尝试一下 JavaScript 实现。

Green

# 2008 年 10 月 10 日

请澄清一下这个问题。这些示例都没有完全奏效。虽然有很多关于问题的讨论，但我希望有人能提供一个 JS 解决方案。

Brian Miller

# 2008 年 10 月 24 日

我也想看看一些代码示例或对 #2 的变体，它可以防止在窗口调整大小为宽度 > 高度时出现空白。

Tom Slick

# 2008 年 11 月 3 日

我想在 Myspace 上让它正常工作。我知道他们不允许使用 JavaScript，甚至不允许使用 <.head>。
这些代码中是否有任何代码可以在 Myspace 中正常工作？

NET MAN

# 2008 年 11 月 3 日

正如所述，这适用于宽度，但仍需要比例检测和高度调整，正如 Chris Coyier 所指出的。CSS 可能无法检测到这些东西，这就是为什么您真正需要一个 JavaScript 解决方案来处理所有这一切的原因。

有人实现了解决宽度或高度（比例）问题的解决方案吗？

Thomas

# 2008 年 11 月 5 日

我为我朋友的朋友制作了另一个带有可调整大小的背景图像的解决方案请参阅此链接

Nathalie

# 2008 年 11 月 6 日

我一直在寻找一个解决方案，可以让背景图片调整大小并保持比例。但我没有找到一个解决方案，可以让图片在调整高度时仍然填充整个屏幕...
如果有人有想法...？

Thomas

# 2008 年 11 月 6 日

您好，Nathalie,
我认为您正在寻找的解决方案是 Flash。

干杯 Thomas

Nathalie

# 2008 年 11 月 6 日

您好，Thomas！

好吧，Flash、JavaScript、CSS、HTML - 我真的不在乎哪一个 - 我首先主要搜索了 Flash 代码 - 但我没有找到令人满意的解决方案。这就是我开始寻找 JavaScript 和 CSS 的原因...
您知道如何使用 Flash 来解决这个问题吗？

干杯。
nath

Gazikent

# 2008 年 11 月 11 日

谢谢，我会试试的！

Thomas

# 2008 年 11 月 11 日

Nathalie，您看过我在 11 月 5 日发布的帖子吗？您在 CSS、xhtml 中寻找的是这样的东西吗？
您需要使用正确的 Doctype 来让它在 IE 中正常工作。我知道 IE 6 和 sp 2（xp）工作得不好。我不太关心 IE 6。

爱苹果 ;-)

# 2008 年 11 月 11 日

我需要这个来开发一个网站，我找到了这个解决方案。它非常简单的 CSS。它允许图像按宽度缩放，但保持图像的比例。

无论如何，我到这里是为了寻找想法，因此想在这里分享一下这个方法，以备不时之需。

Linck

评论永久链接# 2009 年 1 月 3 日

您好，J。我刚接触这方面，但您的图像缩放看起来很酷。在看到“去中国”网站后，我一直在寻找一种方法来实现它。您的方法看起来很像。您是如何做到的？在哪个程序中实现的？
victoria froud

评论永久链接# 2009 年 1 月 4 日

您好，J，这个方法真的很有效。我想这是作为背景图像导入的吗？您是如何确定浏览器窗口的正确大小的？我的首页上也有链接，我需要让链接随着其他所有内容一起调整大小。有什么想法吗？感谢您的帮助，Victoria。

地方选举 2009

# 2008 年 11 月 18 日

谢谢，我会试试的

凯利

# 2008 年 11 月 21 日

您好,
我认为我遇到了与维多利亚相同的麻烦。我知道一些代码，但我需要一些帮助来了解要更改什么。每次我尝试将图片更改为我想要的图片时，新图片就会变成背景并且不会改变大小。

Tom

# 2008 年 11 月 25 日

我认为这就是每个人都在寻找的（减去幻灯片部分）。

http://www.adultswim.com/shows/index.html

不幸的是，我无法确定他们是如何做到这一点的。

安德鲁

# 2008 年 12 月 9 日

@汤姆

我也是。如果有人弄清楚了 Adult Swim 的缩放文字的方式，请告诉我们。如果我弄明白了，会发帖。

安德鲁

# 2008 年 12 月 9 日

呃，它是如何工作的*，我的意思是。

这绝对是我见过的最优雅的缩放解决方案。我浏览了所有我能找到的 js 文件，但它们都与幻灯片有关。关于缩放还没有线索。不幸的是，我仍然是 javascript 新手。

安东尼奥

# 2008 年 12 月 11 日

是的，这很有趣。但是内容很长的页面不会滚动，页面中没有滚动条。

Thomas

评论永久链接# 2008 年 12 月 11 日

您可以滚动此处的内容http://www.fiskebussen.se 或页面

Nathalie

# 2008 年 12 月 12 日

就我个人而言，我认为这是一个非常好的解决方案.. 不知道它是如何做到的.. 太可惜了.. http://www.koeweidenpostma.com

NET MAN

# 2008 年 12 月 12 日

娜塔莉，这很好，但与主题无关 - 该解决方案完全是 Flash - 与 CSS 无关。

戴夫

# 2009 年 1 月 9 日

有人在这方面取得进一步进展吗？我一直尝试将图像设置为最小宽度，以便它按比例缩放到一定程度，然后保持不变……但是……它没有起作用。

推特群组

# 2009 年 1 月 27 日

我试图调整背景图像的大小，而不裁剪任何部分。（没有 overflow:hidden）我相信我们可以使用 height:100% 来做到这一点。
我在将相同的内容应用于特定部分时遇到了问题，图像要么被拉伸，要么被压缩。

有任何线索吗？

nicole@younic

# 2009 年 1 月 30 日

哦，天哪 :-( 最近才想到同样的主题：http://www.younic.de/scaling-body-background-images-with-pure-css 但好吧，先到先得 ;-)

群众运动

# 2009 年 1 月 30 日

我想知道您是否可以看一下http://www.treemendousplantworks.com/style.html

我正在为一些朋友制作一个网站，他们有一个基于表格的网站。我并不是 CSS 专家，我非常感谢您关于如何使用 JavaScript 使网站背景拉伸以适应的教程。但是，我很难弄清楚现在如何放置我的页脚，以便它位于页面底部。您能使用 Firebug 调试该页面并告诉我您是否可以为这个问题提出解决方案吗？

您能做任何事都将不胜感激。

Re
克里斯·科耶

我会用

.bg {
bottom: 0;
left: 0;
position: fixed;
width: 100%;
z-index: 5000;
}

-克里斯
https://css-tricks.org.cn

群众运动

# 2009 年 1 月 30 日

嘿，克里斯，

这似乎是一个不错的修复，但它没有奏效。不知何故，现在它完全脱离了页面。当我最小化窗口并调整大小后，我可以看到它仍然在页面上，但不在页脚区域。我的页脚 css 中是否有导致这种差异的东西？

感谢您的帮助！

群众运动

零

# 2009 年 1 月 30 日

嗨，克里斯 -

我正在尝试修改您的代码，以便图像始终填充整个窗口。我不关心窗口裁剪图像，我只不想看到任何空白。

我所依据的逻辑是

将图像大小调整为窗口宽度
检查图像高度是否大于窗口高度
如果是，将图像宽度设置为窗口宽度
如果不是，将图像高度设置为窗口高度

这听起来合理吗？另一个部分是，我不确定如何使用 jsQuery 实现这一点。您能帮忙吗？

维多利亚

评论永久链接# 2009 年 1 月 31 日

我已经设法做到了这一点，但我没有将图像作为背景图像放置。我将它放置在一个尽可能接近浏览器窗口大小的层中。然后将背景颜色设置为与图像背景颜色相同。这样可以消除任何白色边框。维多利亚。
零

评论永久链接# 2009 年 2 月 2 日

我不完全清楚图像比例是如何保持的；我想这仅仅是通过在这行中设置图像宽度来实现的
$("img.source-image").attr({ width: $winwidth

是这样吗？

群众运动

# 2009 年 1 月 30 日

没关系。我已经弄清楚了页脚。它毕竟是在页脚标签中。感谢您的帮助，克里斯！干杯！

~群众运动

萨姆·邓恩

# 2009 年 2 月 4 日

Chris,

我只想感谢您在这篇文章中提供的灵感，我看到了这一点并开始研究 jQuery 修复，这篇文章在让我开始使用它方面帮助很大。我是这个博客的忠实粉丝，再次感谢。

这是我的修复（浏览器兼容），它是一个名为 Supersized 的 jQuery 插件 -
http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

乔治

# 2013 年 11 月 5 日

这对我很有效，我为此苦恼不已。感谢克里斯！

加布里埃尔·纳米亚斯

# 2013 年 11 月 11 日

我建议将 z-index 设置为 -1，以便主体可以位于图像之上（如下所示）

#img.source-image {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

桑德

# 2013 年 11 月 20 日

“天气怎么样”链接会带您到一个垃圾邮件网站！请完全删除该链接。

克里斯

# 2014 年 2 月 25 日

等一下。它是背景图像还是只是图像？我知道如何将可调整大小的图像放入 div 中，但我想要一个可调整大小的背景图像。背景图像通过 css 加载，使用背景图像的优点是它不会影响页面加载时间。因此需要可调整大小的背景图像。我认为本教程只是在教如何通过 html 将图像放入 div 中，然后通过 css 对图像进行样式设置。真正的背景图像需要像这样加载到文档中

      #some id{ 
      background-image: url(assets/image.jpg);

我只是没有正确理解本教程吗？

感谢任何反馈。我真的很想得到一些关于如何获得可调整大小的背景图像的帮助。

noojii

# 2014 年 5 月 12 日

将此用作在 Magento 上使用视网膜图像作为徽标的仅 css 方式。似乎在视网膜和非视网膜设备上都运行良好！非常感谢！

phtml

      <a href="something" title="something" rel="nofollow">
            &lt;img src=&quot;getSkinUrl('images/logo/logo.png') ?&gt;" alt="something" /&gt;
      </a>

css
.header .logo {
width: 289px;
height: 75px;
position: relative;
display: block;
}
.header-center a.logo img {width: 100%;
position: absolute;
top: 0;
left: 0;
}

迈克

# 2014 年 6 月 27 日

两行简单的 css 行代码不能正常工作吗？

.div {
            background:url('address-of-picture-.png') no-repeat center;
            background-size:cover
     }

此评论线程已关闭。如果您需要分享重要信息，请联系我们。