Web 开发中的响应式图片解决方案

发布于 2017-11-02 00:00:44 字数 3707 浏览 2528 评论 0

我们在使用响应布局的时候会考虑，手机上的图片没必要和电脑上的一样大。如果是从大到小的方法设计，那大屏幕的图片在小屏幕上会被缩小，增加了大量的空间。如果是从小到大的方法设计，那小屏幕的图片在大屏幕上会被拉伸到模糊。有什么方法可以兼顾小屏幕和大屏幕，这里引进了响应图片的概念。

响应式图片

我们知道响应式的核心就是根据屏幕的大小，选择不同的 CSS 样式，那么图片是不是也可以通过判断不同大小的屏幕，然后选择性的加载不同尺寸的图片，由 Filament Group 提出的响应式图片技术思想，有助于解决上面提到的问题。

不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。

这项技术支持多数的现代浏览器，包括 IE8+、Safari、Chrome 和 Opera，以及这些浏览器的移动设备版本，在 FireFox 及一些旧浏览器中，则会优雅降级，我们仍可得到小图片的输出，但同时原始大图也会被下载。

Picturefill

Picturefill 允许 Web 开发人员根据不同的屏幕大小、视口大小、屏幕分辨率等情况提供不同的图片给用户。

使用方法

首先引入JS（需要在HTML文档头部引用）

<script src="picturefill.js"></script>

为了使你的网页能够有效的加载，建议增加一个异步属性的脚本标签。告诉浏览器可以异步加载 picturefill，不需要等待它加载完成之后再去加载其余的内容。如果你添加这个属性，你需要在引人 picturefill 之间加入一行脚本，同时也是为了让老的浏览器在 picturefill 还没有完成加载时遇到 picturefill 可以识别 picture 元素。

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.js" async></script>
</head>

注意：如果你文档中已经包含了 HTML5 shiv（例如：Modernizr），那么你就不需要包含这段 JS 脚本。当然许多高级的使用者可不需要这样，而是选择像 Require.js 一样动态的加载 picturefill。（类似 AMD 和 CommonJS 的支持包括在脚本）。

一旦你已经包括 picturefill.js，你就可以开始添加响应图像元素到您的网站，Picturefill 增加了对响应图像解决方案，包括图像元素和新的 img 元素属性的整个套件的支持。

使用 `srcset` 属性

<img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x">

使用 `srcset` 和 `sizes` 属性

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/medium.jpg 375w,
          examples/images/large.jpg 480w,
          examples/images/extralarge.jpg 768w">

其中 sizes 定义 img 显示的尺寸，srcset 定义图片源以及图片的自然大小。浏览器会根据实际情况自主选择加载哪张图片。

使用 `picture` 属性

<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
  <img srcset="examples/images/art-medium.jpg">
</picture>

`picture` 中的 `type` 属性

Picturefill 支持 SVG 和的 WebP 作为其核心的一部分，但以下 MIME 类型可以通过 typesupport 插件一起使用：

image/bmp
image/xbmp
image/jp2
image/vnd.ms-photo
video/vnd.mozilla.apng

<picture>
  <source srcset="examples/images/large.webp" type="image/webp">  
  <img srcset="examples/images/large.jpg">  
</picture>

CSS3伪类

我们都知道可以用 ::before 和 ::after 伪元素和 content 属性来动态显示一些内容或者做其它很酷的事情，而且在 CSS 2.1 中即被支持。不过 content 属性在 CSS 2.1 中只能用于这两个伪元素中，而在 CSS3 中，任何元素都可以使用 content 属性了，这个方法就是结合 CSS3 的 attr 属性和 HTML 自定义属性的功能：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

当然这些方法也有不足之处，比如 PC 端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件。

分享到QQ

分享到微博