　　jq width() 、height()获取的是图片加载到页面上的图片显示尺寸（图片标签width、height属性值或max-width后的值）而非图片真实尺寸；所以虽然在小屏设备上看到的图片小但是消耗的流量是固定不变的。
　　当网站在狭窄的屏幕上观看时，会显示一幅图片的裁剪版本，裁剪版本有重要的细节，而对于像平板电脑这样的中等宽度的屏幕设备来说，也许是两者之间的东西—这通常被称之为艺术方向问题（art direction problem）。
　　如果是在小屏手机屏幕上显示网页，那么没有必要在网页上嵌入这样大的图片。这被称之为分辨率切换问题（resolution switching problem）—一张位图被设置为固定像素的宽和高。

一、分辨率切换问题

1）分辨率切换：不同的尺寸

　　那么，我们想要用分辨率切换解决什么问题呢？我们想要显示相同的图片内容，仅仅依靠设备来显示更大或更小的图片。
　　标准的<img>元素传统上仅仅让你给浏览器指定唯一的资源文件。

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

　　然而我们可以使用两个新的属性——srcset 和 sizes——可以提供更多额外的资源图像和提示来帮助浏览器选择正确的一个资源。

在这篇文章中讨论的新特性 — srcset/sizes/ — 都已经被新版本的现代浏览器和移动浏览器所支持（包括Edge，而不是IE）。

<img srcset="elva-fairy-320w.jpg 320w,elva-fairy-480w.jpg 480w,elva-fairy-800w.jpg 800w"sizes="(max-width: 320px) 280px,(max-width: 480px) 440px,800px"src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

　　srcset和sizes属性看起来很复杂，但是如果你按照上图所示进行格式化，那么他们并不是很难理解，每一行有不同的属性值。每个值都包含逗号分隔的列表。列表的每一部分由三个子部分组成。让我们来看看现在的每一个内容：
　　srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

一个文件名 (elva-fairy-480w.jpg.)
一个空格
图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小。

2）分辨率切换: 相同的尺寸, 不同的分辨率

　　如果你支持多分辨率显示，但每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过srcset和x-descriptors但没有sizes——一种更简单的语法——来选择适当的分辨率图片。

<img srcset="elva-fairy-320w.jpg,elva-fairy-480w.jpg 1.5x,elva-fairy-640w.jpg 2x"src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

　　浏览器只是计算出正在显示的显示器的分辨率，然后提供srcset引用的最适合的图像。因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，elva-fairy-320w.jpg会被加载（1x 是隐藏的，所以你不需要写出来）。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，the elva-fairy-640w.jpg 会被加载。640px的图像大小为93KB，320px的图像的大小仅仅有39KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。

二、艺术方向问题

　　艺术方向问题涉及要更改显示的图像以适应不同的图像显示尺寸。例如，如果在桌面浏览器上的一个网站上显示一个大型的风景照片，而照片中的人在照片中央，然后当在移动端浏览器上浏览这个网站时，照片会缩小，这时照片上的人会变得非常小，看起来会很糟糕。这样的话，在移动端显示一个更小的人物图像会更好，会显示放大的人物。元素允许我们这样实现。

<picture><source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"><source media="(min-width: 800px)" srcset="elva-800w.jpg"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

你应该仅仅当在艺术方向场景下使用media属性；当你使用media时，不要在sizes属性中也提供媒体条件。

为什么我们不能使用 CSS 或 JavaScript 来做到响应式图片效果？

　　当浏览器开始加载一个页面, 它会先下载 (预加载) 任意的图片，这是发生在主解析器开始加载和解析页面的 CSS 和 JavaScript 之前的。这是一个非常有用的技巧, 平均来说，页面加载的时间少了 20%。但是, 这对响应式图片一点帮助都没有, 所以需要实现类似 srcset的方法。因为你不能先加载好元素后, 再用 JavaScript 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。

【HTML5】响应式图片相关推荐

【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
CSS 与 HTML5 响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
HTML5 响应式图片
现在上网设备越来越多,各种设备的屏幕千差万别,如果只用一张图片去涵盖所有的设备,一是可能会造成某些设备上显示效果不佳,比如使用了一张低清晰度的图,而网页运行在一个高清大屏里:二是可能会浪费带宽,比如使 ...
HTML+CSS+JS实现 ❤️ html5响应式图片轮播❤️
效果演示: 文末获取源码代码目录: 主要代码实现: CSS样式: .flickerplate {position: relative;width: 100%;height: 600px;backg ...
分享一个非常有用的HTML5+CSS3响应式图片案例
随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种 ...
html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片
图片在响应式网页设计中是出了名的最具挑战性的方面之一.今天我们就来看看如何使用元素来处理响应式图片. 让我们先了解一下问题固定宽度,像素完美的网站设计已经离我们远去了.在宽屏显示器,互联网电视,多尺 ...
html5手机端响应式图片相册幻灯片插件特效
html5手机端响应式图片相册幻灯片插件特效作品介绍 1.网页作品简介方面 :html5手机端响应式图片相册幻灯片插件特效 2.网页作品编辑方面:作品下载后可使用任意HTML编辑软件(例如:DW.H ...
HTML5响应式吸塑包装定制塑胶制品类织梦模板
介绍: HTML5响应式吸塑包装定制塑胶制品类织梦模板,自适应手机版,响应式全屏自适应布局设计. 适用于环保塑料材料模板.html5响应式网站模板:首页和全局重新做了全面优化,方便大家无缝使用: 网站 ...
HTML5响应式品牌服装设计类织梦模板
介绍: HTML5响应式品牌服装设计类织梦模板,响应式布局设计,非常时尚大气. 模板整体以多种颜色为主色调,适合做各种类型的网站. 同一个后台管理三网合一简单方便,体验极佳网盘下载地址: http: ...

【HTML5】响应式图片

一、分辨率切换问题

1）分辨率切换：不同的尺寸

2）分辨率切换: 相同的尺寸, 不同的分辨率

二、艺术方向问题

【HTML5】响应式图片相关推荐

最新文章

热门文章