本文设有很多，最理想的解决方案，响应图像只是其中之一。我们建议您查看不同的方法，然后再选择一个特定的响应图像解决方案，包括这两个：如何避免重复下载响应图像中选择响应图像解决方案。
大家都在谈论的的srcset属性和元素，以及服务器端的技术，如响应性的Web设计+服务器端组件(RESS)如新的HTML5标准，得出的结论是简单，静态的，你会原谅网站不能支持响应的图像。这一结论可能为时过早，但是。其实，有一个简单的，简单的方法来提供响应的图像，支持所有当今的Web浏览器：CSS背景图像。
然而，这种方法有一定的局限性，并在所有情况下，这是行不通的。但是，如果你的要求并不复杂，如果你愿意做出额外的努力，以确保您的图像访问，CSS背景图像可能是你所需要的。
在这篇文章中，我们将着眼于CSS背景办法在以下几个步骤：
首先，我们要检讨的目标和要求，为响应图像。
然后，我们将看到CSS媒体查询如何可以帮助确定我们的用户设备的重要特征。
我们将探讨的关键CSS 背景图像，让我们应对这些特性的属性。
我们将着眼于优化弥补响应集的各个图像的战略。
我们将研究这种方法的局限性，在许多情况下，也有简单的技术来克服它们。
最后，我们将介绍这种方法的问题，还没有解决方法。
注：这种方法需要明确的控制您的网站的样式表，以及它的HTML标记。如果您的网站依赖于一个内容管理系统(CMS)，你可能没有足够的控制这些方面的网站。
极品响应图像
响应图像响应的Web设计(RWD)，设计由伊桑马科特战略，以应对惊人的普及，移动设备浏览网页的重要组成部分。伊桑认识，以前的最佳实践方案-为不同类型的设备开发单独的网站-根本无法应付各种惊人的设备，网络用户可能采用访问我们的网站建设。
RWD采取完全不同的方法：创建一个单一的网站，但该网站的识别和应对它的上下文。如果用户有一个宽屏幕的桌面浏览器，例如，允许网站内容分布在多个列。然而，在智能手机上重新排列的内容局限于单个列。
在许多情况下，这就是停止响应的设计 - 简单的调整布局和演示。如果这一切，但我们认为，我们没有履行响应式设计的目标，我们卖我们的用户短。
真正响应用户的情况下，需要考虑各方面的经验，设计通常包括图像。对于现实生活中的例子，考虑一个网站如contfont.net。，单页网站，有一个主要的形象和一组典型的HTML，样式表，字体，和JavaScript文件。
该网站看起来很华丽的超高分辨率显示器的电脑上，因为它包括一个高分辨率版本的主要图像。交付该图像文件不便宜，但其1940×1229像素使图像压缩后大小为446 KB。
该网站可以为所有用户使用相同的图像文件，而不妥协的视觉体验。较小的设备，如智能手机上的Web浏览器会调整它的大小以适合显示。虽然这种做法会保持网站的视觉吸引力，整体用户体验将受到显着。
在iPhone上，290×183像素的图像大小为18 KB，452 KB，1940×1229像素的图像在MacBook Pro上的大图看起来相同。
用户浏览网站上说，上一代的智能手机是什么意思?对于用户，290×183像素图像的大小为18 KB，看起来较大的版本相同。没有一个负责任的形象的方法，该网站将强制用户下载一个额外的429 KB的数据，完全是浪费。这多余的不仅仅是学术上的，它具有重大影响网站的加载时间。智能手机用户可能访问的网站超过2 Mb / s的一个典型的3G连接。未能提供一个负责任的形象，增加了加载时间从1.3秒到3秒，明显超过一倍!
原图需要3.0秒来加载在3G网络上，而1.3秒为一个负责任的形象。大图。
一个负责任的首要目标图像的方法很简单：只提供用户的设备实际上可以使用的像素。
识别用户的上下文
如果我们的网站去应对我们的用户的情况下，我们需要一种方法来标识这方面。今天，CSS提供最有效的方式来区分不同的设备。CSS为我们提供了两个关键问题的答案：什么是用户的显示器的大小?显示支持视网膜式图像?
CSS工具，为我们提供了这个信息是一个媒体查询。媒体查询定义一组CSS样式属性仅适用于具有特殊品质的设备。本来，媒体查询是有限的媒体类型。其中盲人点字(盲文触觉反馈装置)，语音(语音合成)，TTY(设备等宽字体，如电传打字机)和TV(电视类型的设备，例如CSS规范中定义了大量分辨率低和没有滚动)。目前，只有两种媒体类型，大多数浏览器都支持打印(印刷，分页材料)和屏幕(电脑屏幕)。
扩大了使用CSS3媒体查询，但是，通过让样式表来指定特定功能的设备以及媒体类型。的功能可以包括在屏幕上的设备的情况下，显示的许多特征，包括其宽度，方向，分辨率和像素比例。这些功能提供的信息，我们需要选择一个合适的响应图像。
这里媒体查询如何可以帮助我们解决了上一节的窘境。作为一个例子，一个15英寸的MacBook Pro有一个屏幕宽度为1440像素(忽略的那一刻Retina显示屏选项)。要确定适用于屏幕大小(大)的样式，我们可以写我们的样式表：
@media only screen and (min-width: 1440px){
/* styles for MacBook Pro-sized screens and larger */
}该块中定义的样式将只适用于当用户访问的网页，使用的设备的屏幕大小为1440像素。有一个问题，虽然。媒体屏幕尺寸并不适用于设备的硬件，而是适用于Web浏览器的视口。视口是在浏览器窗口的大小减去任何浏览器中的铬，如工具栏。
除非用户在全屏模式下浏览，浏览器窗口会略小于1440像素宽。因此，对于这种更常见的情形，我们可能要重写样式表位。1200像素或许是比较现实的。
@media only screen and (min-width: 1200px){
/* styles for wide screens */
}媒体查询有两部分。第一部分，只有屏幕，显示样式不应适用于页面的印刷本或其他非标设备。(唯一的关键字没有实际影响的媒体查询，它是有严格的真的老的浏览器不支持媒体功能，因为这些浏览器不理解唯一的语法，他们会简单地忽略整个块样式。查询，最小宽度：1200像素)的第二部分给出了屏幕的最小宽度的样式将被应用。和连接这些部件是指申请样式，都必须是真实的。
我们可以使用类似的技术来定义样式人像模式的智能手机。
@media only screen and (max-width: 320px){
/* styles for narrow screens */
}在这种情况下，我们可以继续前进，在查询中使用的实际设备的屏幕尺寸。智能手机上的Web浏览器总是全屏宽度。
最小宽度和最大宽度功能规格，很容易确定用户的设备的宽度。不幸的是，识别Retina显示屏是不是很简单的。不同的浏览器使用不同的语法这个功能，因此我们必须求助于厂商的前缀。为了使事情稍微差一些，许多版本的Firefox中存在一个bug，在他们的语法，所以我们需要同时使用固定和Mozilla浏览器中的一个“破”的语法。截至目前，视网膜品质显示器看起来像下面推荐的查询。
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {/* styles for Retina-type displays */
}最终，浏览器都将支持标准的每像素点符号(DPPX)，并从我们的样式表，我们可以删除供应商前缀。
CSS background-image属性
如果CSS可以可靠地识别用户的情况下，你可能会认为它会很容易支持响应的图像。似乎是合乎逻辑的方法可能会是我们不希望下载这些图像设置显示：无。下面是一个试图严格基于屏幕尺寸。(我们正在为简洁起见，省略视网膜考虑。)
只有屏幕和
<html lang="en">
<head>
<meta charset="utf-8">
<title>title>
<style>
img.smallscreen { display: none; }
@media only screen and (max-width: 320px) {
img {
display: none;
}
img.smallscreen {
display: inline;
}
}
style>
head>
<body>
<img src="largeimage.jpg">
body>
html>调整您的浏览器窗口的大小，直到图像宽度看起来差令人无法接受。该屏幕的宽度将是你的断点。大图。
当你找到的第一个断点，使用图形程序来创建一个新的测试图像，大小从原来的源。新的测试图像中找到下一个断点，并重复上述过程继续下去，直到你已经达到了您的网站将支持的最大视区宽度。
在这一点上，你有你的图像断点和一组图像匹配。Retina显示屏，创建额外的双分辨率的图像。这里是的完整列表图像contfont.net网站：
您可以使用此方法在您的网站上为每个图像分开，没有任何理由，所有的图像都有使用相同的断点。然而，如果你的网站有大量的图片，它可能是更有效地使用一些网站的图片，发现一些常见的断点，然后重复这些断点的所有网站上的图像。
克服的局限性
在最简单的情况下，上述步骤都需要支持响应图像。当然，网站很少是简单的，而事实上，有几个步骤，我们可以采取改善的办法。
使图像无障碍
标签支持的ALT属性，提供了一种替代方法，文本的形象描述。这种描述是很重要的，屏幕阅读器的用户访问网站依靠的ALT含量来描述图像。CSS背景图像不的
标签，因此没有alt属性，但我们仍然可以使他们视力受损的用户访问。要做到这一点，我们添加了两个额外的属性，我们的标记。
第一个额外的属性，作用，让屏幕的读者都知道，的服务的作用一个 标签，即使它是不明确的标记。第二个属性，咏叹调 标签供应ALT属性中的
同样的目的。有了这两个增加，屏幕阅读器可以宣布该元素是一个形象，他们将读取该图像替换文本说明您所提供给他们的用户。
在浏览器中的缩放图像
还有另外一个有用的属性的标签，不支持我们的简单方法：由浏览器自动调整大小和缩放。随着一个标准的
，我们可以简单地设置包含元素的百分比宽度，浏览器会自动计算的宽度和比例尺度的高度。例如，考虑下面的代码片段显示image.jpg的，具有天然的尺寸为600×300像素的图像文件。
浏览器会自动缩放图像到含，减少其宽度从600至400像素。它还保留了图像的纵横比，在同一时间从300到200像素缩放图像的高度。其结果是一个无失真的图像，非常适合在页面上。
第一格雷迪Kuhnline描述方法，我们就可以达到同样的效果，一个现代浏览器的CSS背景图像。(警告：本款介绍的方法不工作版本的Internet Explorer 8及以下，因为这些浏览器不支持必要的CSS属性。)
最简单的一部分，以解决正在扩大的宽度。与的
标签，我们可以设置固定宽度内的 我们的元素，我们只是必须明确地表明，背景应该填补这一HTML标记看起来没有很大的不同。
我们要结合几个CSS属性来设置的宽度，让他们一次一个：
#images元素inline-block的设置显示属性。没有这个属性，CSS将作为内嵌显示的元素，我们将无法给它一个宽度或(在一分钟内)的高度。
该元素的宽度设置为100% ，所以我们的形象的含有的的填充。字体大小和行高属性设置为0，这样的跨度内的任何内容做没有考虑到它的大小。
设置垂直对齐物业中间垂直居中的图像元素，设置背景大小的属性为100%，所以我们的形象充满图像元素。设置背景位置属性50%50% ，在图像元素的背景图像对齐。设置背景重复属性不重复，以防止浏览器从水平或垂直平铺图像。
由此产生的CSS样式设置的图像元素(元素的“形象”与ID)。
#image {
display: inline-block;
100%;
font-size: 0;
line-height: 0;
vertical-align: middle;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url(image.jpg);
}
这些步骤使图像的宽度照顾，但我们还没有攻克的高度。在上面的标记或样式告诉任何浏览器中的图像元素的高度。因此，它会默认它的自然高度，唉，零，因为没有实际内容的。幸运的是，我们可以解决这个问题有一些小的增加。
首先，我们需要添加一个额外的元素对我们的标记。这种额外的元件被放置于图像元素。
现在我们定义一些样式属性此内的。设置其显示属性块，所以将有一个高度和宽度。其高度设置为0，因为它不具有任何实际的内容。添加填充顶物业的形象的高度与宽度的比例等于指定百分比。
这最后一步是关键。即使继承没有从它的内容，填充顶力的元素占用的垂直空间高度。此外，填充顶接受百分比值的百分比是相对于元素的宽度。我们的形象是970×614像素，所以我们使用的是百分比值(614÷970)×100%，63.3%。现在，浏览器将确保我们的形象保持其纵横比，因为它的放大或缩小。
现在一起所有
要看到所有这些组件是如何结合在一起的，这是我们作为一个例子的contfont.net网站的代码。首先是主要包括网站形象的HTML标记。
样式表定义的属性，使图像按比例增减。
.hero #cafe {
width:100%;
display: inline-block;
vertical-align: middle;
font:0/0 serif;
text-shadow: none;
color: transparent;
background-size:100%;
background-position:50%50%;
background-repeat: no-repeat;
}
.hero #cafe .inner {
padding-top:63.35%;/* height/width of image */
display: block;
height:0;
}最后，媒体查询了一套基于用户的上下文中挑选适当的图像文件。(下面的例子为简洁起见，省略了供应商的前缀)。
/* default screen, non-retina */
.hero #cafe {background-image:url("../img/candc970.jpg");}
@media only screen and (max-width: 320px){
/* Small screen, non-retina */
.hero #cafe {background-image:url("../img/candc290.jpg");}
}
@media
only screen and (min-resolution: 2dppx) and (max- 320px) {
/* Small screen, retina */
.hero #cafe {background-image:url("../img/candc290@2x.jpg");}
}
@media only screen and (min-width: 321px) and (max-width: 538px){
/* Medium screen, non-retina */
.hero #cafe {background-image:url("../img/candc538.jpg");}
}
@media
only screen and (min-resolution: 2dppx) and (min- 321px) and (max- 538px) {
/* Medium screen, retina */
.hero #cafe {background-image:url("../img/candc538@2x.jpg");}
}
@media
only screen and (min-resolution: 2dppx) and (min- 539px) {
/* Large screen, retina */
.hero #cafe {background-image:url("../img/candc970@2x.jpg");}
}潜在的问题
CSS背景图像是一个方便的方式来提供响应的图像，但是这种方法是不完美的。在一个基本的层面上，它违反了现代Web标准的基本理念之一 - 内容与表示分离。高级版本的做法也遭受浏览器的兼容性问题，以及方法不解决一些更深层次的问题，一般的响应图像。
风格和内容的分离
+ CSS开发专门分开从内容风格。在现代网络，HTML页面提供了一个网站的所有内容，而样式表只影响外观内容。不应该定义样式表的内容本身。当然，风格和内容之间的分离已被违反有点与CSS的内容和内容后的属性，但这些属性通常用来增强的外观(例如，通过添加一个图标，一个元素)。
用CSS指定主网站的图片，是一个完全不同的水平。通过指定的主要内容，而不是HTML与CSS，使我们的网站更难排除故障，使他们更难以维持，我们创建系统障碍，可能会尝试自动解析我们的网站。
不幸的是，确实是有这个问题没有得到解决。如果严格分离的风格和内容对你很重要，那么你就必须考虑以其他方式响应图像。
浏览器支持缩放图像
如上所述，加入缩放图像的基本方法的增强，我们将无法在Internet Explorer 8及以下工作。如srcset标准化的方法可能是向后兼容的浏览器，但是，当然，本身srcset是不是当今任何主流浏览器上。
如果你需要支持IE8现在，你可能会考虑IE8中，指定固定图像缩放图像的大小，而不是创建一个单独的样式表。当然，你要包括该样式表，使其他浏览器IE条件注释内不会看到它。
用户上下文的实际问题
也许这种做法最根本的问题是一个问题，一般的响应图像。我们正在使用的屏幕的宽度和像素密度来确定用户的上下文，但目前尚不清楚，这样的做法总是合适的。举个例子，通过智能手机的Wi-Fi热点的笔记本用户访问Web。
该用户的Web浏览器将显示所有特点，高密度，宽屏幕的设备，和一个负责任的网站将提供大尺寸，高清晰度的图像。如果不这样做会显得可怜我们的用户的显示屏上，但这些图像可能要花很长的时间来加载过的无线网络。他们可以大大提高网站的加载时间，对他们的无线账单，他们最终可能会花费我们的用户真正的金钱。如果可以选择，他们可能更喜欢较低分辨率的图像。
事实证明，这个问题的解决是一个很艰难的一个聪明的人肯定是在Web社区讨论，但到目前为止，很少有一个切实可行的解决方案上达成共识。现在，基于CSS的情况下发现是最好的技术。
本文由红蜘蛛网络联盟（www.rswebun.com）编译，原文地址：http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/