img元素srcset属性浅析

img srcset 属性

img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

属性格式：图片地址宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />复制代码

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询宽度描述（支持px），多条规则用逗号分隔。

<img src="data:images/gun.png"srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"sizes="(max-width: 320px) 300w, 1200w"/>复制代码

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。

css image-set()

css属性image-set()支持根据用户分辨率适配图像。

body {background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}复制代码

上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。

img元素srcset属性浅析相关推荐

响应式图片（srcset属性和picture元素）
自适应网页设计意味着,不仅我们的布局能根据设备特性而变化,内容也可以.例如,高分辨率 (2x) 显示屏上高分辨率图形可保证清晰度.当浏览器宽度为 800px 时,一张 50% 宽度的图像或许很适合,但 ...
HTML 里 img 元素的 src 和 srcset 属性有何区别？
在 HTML 中,img 元素通常用于在网页中插入图片.img 元素有两个相关的属性:src 和 srcset. src 属性指定图像的 URL,它是必需的.浏览器将使用该 URL 加载图像并将其显示 ...
img标签中的srcset属性有什么用？
我的博客https://blog.ideaopen.cn/ img元素的srcset属性用于浏览器根据宽.高和像素密度来加载相应的图片资源. 也就是说,我们不需要使用JavaScript也可以实现分辨 ...
响应式图片的实现（含picture标签、srcset属性、sizes属性的使用方法，设备像素比详解）
什么是响应式图片? 响应式图片即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片. 具体表现为: 高分辨率的屏幕,显示高分辨率图像(确保高清屏上,图片依然足够清晰) 低分辨率的屏幕,显示低分辨率 ...
CSS响应式图片运用中的srcset属性
在整个网站的开发中,在管理图片上较为困难.注意,图片要在各种设备上平滑过渡显示,它们将会碰到的问题有: 适当的优化和减少图片的体积注意不要浪费带宽(网站的成败与否加载速度是其中主要因素之一) 设备使 ...
php 元素添加子元素,css,html_怎么在添加的子元素上继承父元素上已存在的子元素的属性？，css,html,javascript - phpStudy...
怎么在添加的子元素上继承父元素上已存在的子元素的属性? 请问如何使添加后的子元素(tr)也能在鼠标经过前后继续保留其存在的子元素上的属性? dom的基础应用 window.οnlοad=functio ...
怎样设置html的元素属性,Jquery怎么设置元素的属性和样式？
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性对于下 ...
angularJS 自定义元素和属性
创造自定义元素和属性的方法是:directive('string',function(){ return{}; }); ①函数接收两个参数:一个字符串(指令的名字),一个函数: ②回调函数必须返回一个 ...
jsoup 标准化html代码,Jsoup从元素抽取属性，文本和HTML
在解析获得一个Document实例对象,并查找到一些元素之后,你希望取得在这些元素中的数据.要取得一个属性的值,可以使用Node.attr(String key) 方法对于一个元素中的文本,可以使用 ...

img元素srcset属性浅析

img元素srcset属性浅析相关推荐

最新文章

热门文章