首页 > 代码库 > 响应式图片的3种解决方案

响应式图片的3种解决方案

目前已经有几种备选的解决方案解决这些问题

  1. 创建一个新的(HTML)元素
  2. 创建新的图像格式
  3. 使用特定技术手段

下面我们一一简述各种方案。

创建新元素(或属性)

该方法已经在使用了,不过在使用方式上存在一些争议。这些争议主要来自两方面:业界的web开发者和浏览器制造者。web开发者提议创建一个新的picture元素(类似HMTL5中的video这样的元素),该元素中包含其他的图片源,示例代码如下:·

//code from http://caibaojian.com/3-solutions-for-responsive-image.html
<picture alt="image description">
  <source src="http://www.mamicode.com/path/to/medium-image.png" media="(min-width: 600px)">
  <source src="http://www.mamicode.com/path/to/large-image.png" media="(min-width: 800px)">
  <img src="http://www.mamicode.com/path/to/mobile-image.png" alt="image description">
</picture>

其中的img元素是默认情况下显示的图片源。

在其上面的两个source元素则是在特定媒体查询(media queries)条件下显示的图片——这也是开发者所喜欢的一种解决方案。

Scott Jehl针对图片元素创建了polyfill项目,就是利用了这种思想,你现在可是就可以使用它了。·

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <span data-src="http://www.mamicode.com/small.jpg"></span>
        <span data-src="http://www.mamicode.com/medium.jpg"     data-media="(min-width: 400px)"></span>
        <span data-src="http://www.mamicode.com/large.jpg"      data-media="(min-width: 800px)"></span>
        <span data-src="http://www.mamicode.com/extralarge.jpg" data-media="(min-width: 1000px)"></span>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="http://www.mamicode.com/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        </noscript>
    </span>

浏览器开发者则是通过给img元素标签增加srcset属性来解决此问题的,功能一样,然而直觉上不好理解。

//code from http://caibaojian.com/3-solutions-for-responsive-image.html
<img src="http://www.mamicode.com/path-to-default-image.jpg" 
  srcset="path-to-default-image.jpg 600w 200h 1x,
                   path-to-another-image.jpg 600w 200h 2x,
                   path-to-a-third-image.jpg 200w 200h">

以srcset的一个值为例讲解:

path-to-another-image.jpg 600w 200h 2x

  •   path-to-another-image.jpg 是不言自明的,当符合下述条件时就使用该 图片
  •   依据media queries要求,设备最小尺寸为600w和200h
  •   浏览器有以2x像素密度显示的能力

响应式图片的3种解决方案