图片的响应式实现-白红宇

图片的响应式实现

阅读量：6500 次

发布时间：2019-06-24

本文共 1623 字，大约阅读时间需要 5 分钟。

一、背景图片响应式实现

1、为了适配 Retina 屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：

.mod .hd h3 {
   background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */}/* ------------- Retina ------------- */@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */       only screen and (min-resolution: 240dpi), /* 标准 */       only screen and (min-resolution: 2dppx) /* 标准 */{
   　　.mod .hd h3{   　　 background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);   　　 background-size: 105px 155px;　　}}

2、使用image-set

显而易见，通过来实现「响应式图片」还是很麻烦，CSS 代码的可维护性不高，有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片，值得庆幸的是中就实现了这种原生语法的「」。

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */background-image: -webkit-image-set(    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

二、普通图片的响应式实现

CSS「image-set」解决了背景图片的响应式问题，但是 HTML中的 img 元素怎么办呢？

1、的解决草案

2011年11月提出了HTML5 的一个解决草案：

2、使用新的srcset属性

W3C 社区讨论组应运而生。最新的规范在这里：（W3C ）。截止本文发布时间，最近一次更新是 2013年4月24日，规范示例：


     
      　　
      　　
      　　
      　　
      　　
      Accessible text

注明：srcset还适用于video，audio标签，如：

参考：

转载于:https://www.cnblogs.com/JoannaQ/p/3157952.html

你可能感兴趣的文章