首页 > 代码库 > 响应式图片的3种解决方案
响应式图片的3种解决方案
目前已经有几种备选的解决方案解决这些问题
- 创建一个新的(HTML)元素
- 创建新的图像格式
- 使用特定技术手段
下面我们一一简述各种方案。
创建新元素(或属性)
该方法已经在使用了,不过在使用方式上存在一些争议。这些争议主要来自两方面:业界的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种解决方案
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。