有许多方法可以实现web页面里图像的应答。然而，我碰到的所有方案都使用了JavaScript。这使我疑惑不用JavaScript实现图像响应是否可行。

　　我提出了下面纯CSS的方案。

　　它是如何工作的呢？

　　我把<img>标签防止在<span>内。src属性将从服务器获得手机版本的图像。接着我还在<span>元素内部包含了一点CSS。

　　什么？？HTML文档中能嵌入了CSS?

　　是的，只要你增加了scoped属性，这就在HTML5里就是非常有效的。在这个CSS里，我从某个断点开始用了@media查询把作为背景的高清图像添加到<span>里。 在下面这段代码里，我只添加了一个断点，然而你当然可以按你喜欢的增加许多。

　　通过使用背景图像指示符，只有在需要的时候才会从服务器获取这个图像。也就是说，只有在media查询满足的时候才能获取到。<img>将确保<span>有正确的高宽比，这样<span>上的背景图像才能得到正确的现实。

　　代码展示

　　下面是可以运行的所有代码。

　　HTML

　　首先看HTML。

[backcolor=white !important][size=1em]

[size=1em]1 [size=1em]2 [size=1em]3 [size=1em]4 [size=1em]5 [size=1em]6

[size=1em][size=1em]<span class="magik-responsive-image" id="image-01"> [size=1em]<img src="[color=blue !important][size=1em]http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res" alt="TODO"> [size=1em]<style scoped> [size=1em]@media screen and (min-width: 701px){#image-01{background-image:url([color=black !important][size=1em]http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}} [size=1em]</style> [size=1em]</span>

　　CSS 我们还需要对CSS最一点修改，以便在应当显示高清图像的时候隐藏低清晰度的图像。技巧是增加backgroud-size:100%;这使得在维护高宽比不变的情况下伸展背景。

[backcolor=white !important][size=1em]

[size=1em]1 [size=1em]2 [size=1em]3 [size=1em]4 [size=1em]5 [size=1em]6 [size=1em]7 [size=1em]8 [size=1em]9 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17

[size=1em][size=1em].magik-responsive-image { [size=1em]background-repeat: no-repeat; [size=1em]background-size: 100%; [size=1em]display: block; [size=1em]position: relative; [size=1em]} [size=1em].magik-responsive-image img { [size=1em]max-width: 100%; [size=1em]} [size=1em]@media screen and (min-width: 701px) { [size=1em].magik-responsive-image img{ [size=1em]opacity: 0; [size=1em]} [size=1em]}

　　好处

• 没有JavaScript
• 实现起来简单
• 还可用于视频（我将在以后的博客文章中发表有关这方面的内容）
  

　　缺点

• 在桌面环境下，需要向服务器发送两个请求
• <style>标签的scoped睡醒在主要的浏览器里仍然没有得到支持。正是由于这个原因，我们才需要增加一个id，不过在后端代码中增加这通常不是问题。
  

有许多方法可以实现web页面里图像的应答。然而，我碰到的所有方案都使用了JavaScript。这使我疑惑不用JavaScript实现图像响应是否可行。

　　我提出了下面纯CSS的方案。

　　它是如何工作的呢？

　　我把<img>标签防止在<span>内。src属性将从服务器获得手机版本的图像。接着我还在<span>元素内部包含了一点CSS。

　　什么？？HTML文档中能嵌入了CSS?

　　是的，只要你增加了scoped属性，这就在HTML5里就是非常有效的。在这个CSS里，我从某个断点开始用了@media查询把作为背景的高清图像添加到<span>里。 在下面这段代码里，我只添加了一个断点，然而你当然可以按你喜欢的增加许多。

　　通过使用背景图像指示符，只有在需要的时候才会从服务器获取这个图像。也就是说，只有在media查询满足的时候才能获取到。<img>将确保<span>有正确的高宽比，这样<span>上的背景图像才能得到正确的现实。

　　代码展示

　　下面是可以运行的所有代码。

　　HTML

　　首先看HTML。

[backcolor=white !important][size=1em]

[size=1em]1 [size=1em]2 [size=1em]3 [size=1em]4 [size=1em]5 [size=1em]6

[size=1em][size=1em]<span class="magik-responsive-image" id="image-01"> [size=1em]<img src="[color=blue !important][size=1em]http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res" alt="TODO"> [size=1em]<style scoped> [size=1em]@media screen and (min-width: 701px){#image-01{background-image:url([color=black !important][size=1em]http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}} [size=1em]</style> [size=1em]</span>

　　CSS 我们还需要对CSS最一点修改，以便在应当显示高清图像的时候隐藏低清晰度的图像。技巧是增加backgroud-size:100%;这使得在维护高宽比不变的情况下伸展背景。

[backcolor=white !important][size=1em]

[size=1em]1 [size=1em]2 [size=1em]3 [size=1em]4 [size=1em]5 [size=1em]6 [size=1em]7 [size=1em]8 [size=1em]9 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17

[size=1em][size=1em].magik-responsive-image { [size=1em]background-repeat: no-repeat; [size=1em]background-size: 100%; [size=1em]display: block; [size=1em]position: relative; [size=1em]} [size=1em].magik-responsive-image img { [size=1em]max-width: 100%; [size=1em]} [size=1em]@media screen and (min-width: 701px) { [size=1em].magik-responsive-image img{ [size=1em]opacity: 0; [size=1em]} [size=1em]}

　　好处

• 没有JavaScript
• 实现起来简单
• 还可用于视频（我将在以后的博客文章中发表有关这方面的内容）
  

　　缺点

• 在桌面环境下，需要向服务器发送两个请求
• <style>标签的scoped睡醒在主要的浏览器里仍然没有得到支持。正是由于这个原因，我们才需要增加一个id，不过在后端代码中增加这通常不是问题。