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

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

2024-09-13 09:24:14   218人阅读

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

  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种解决方案


联系
我们