img srcset 和 sizes

img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题，比方说我需要在retina高的硬件上看到更细腻的图片，又或者我要在电脑看到的图片和在手机上的图片不一样。

解决以上问题，我们可以使用css 中的@media 去实现，可是代码量超出了想象。有了这功能我们就能很好的处理需求，接下来我做个简单的解释，循序渐进的给大家说明。

1. 高 retina

<img src="mdn-logo-sm.png" alt="MDN" srcset="mdn-logo-HD.png 2x, mdn-logo-VHD.png 3x ">

游览器会在加载图片前判断要使用那个图片依据设备的retina。

*注意：所有的图片宽度都是一样，但是质量会改变

2.不同设备宽度使用不同图片

<img src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"sizes="(min-width: 600px) 200px, 400px">

先了解sizes属相，size就是尺寸的意思，图片属性先判断目前要用那个宽度来找srcset

以上的例子是说小于600会使用200px，不然就下一个表达式（400px）

假设现在设备的宽是700px，那么sizes就等于400px，在srcset里寻找400 以上或等于的图片。

-----

伙伴们一定有很多奇怪的想法，这里我就不一个一个的列出来了。

几项事物要注意，

-在使用sizes时，一定要使用srcset

-srcset 使用只能选着2x 或者 200w ，其中一个

转载于:https://www.cnblogs.com/stooges/p/7120135.html

img srcset 和 sizes相关推荐

前端src显示服务器图片,响应式图像之srcset和sizes属性
再一次提到响应式图像,司空见惯了,有点腻了,如果你看完下面的内容,我觉得你会对响应式图像处理会有新的认知.这篇文章我也是无意在进步博客上看到的,认真的看了几遍,有些东西讲的很不错,所以想分享下. 开发 ...
响应式图片img中的srcset和sizes
响应式图片img中的srcset和sizes 参考链接如果是在小屏手机屏幕上显示网页,那么没有必要在网页上嵌入很大的图片.这被称之为分辨率切换问题(resolution switching prob ...
html picture属性,html5图片 srcset、sizes 属性和 picture 元素
前言关于图片img的响应属性srcset,和sizes及picture,很久之前看过,但是因为浏览器兼容原因,一直没有在项目中使用,但是最近发现,这几个属性兼容性还可以了,可以去caniuse中看一 ...
srcset_如何使用srcset构建响应图像
srcset This article is part of a web development series from Microsoft. Thank you for supporting the ...
src和href的区别，并且img中的srcset的作用是什么？
一.src和href的区别 src是指向外部资源的位置,指向的内容会嵌⼊到⽂档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应⽤到⽂档内,如js脚本,img图⽚和frame等元素.当浏 ...
响应式图像_如何为响应图像使用HTML5“图片”，“ srcset”和“大小”
响应式图像 <picture>是HTML5元素,旨在为我们提供更多的功能和性能更好的响应图像功能. Picture标签不会加载单个图像并尝试调整其大小以适合所有可能的视口尺寸和布局,而是加 ...
img 标签的新属性Srcset应用
一.响应式图片srcset属性说起图片的srcset属性,估计有不少与时俱进的小伙伴会在心中不由自主念想道:"这个我知道的,可以根据屏幕密度现实对应尺寸图片,例如--" < ...
src href img的srcset
src 和 href 的区别 src 是指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应用到文档内,如js脚本,img图片和frame元素.当 ...
H5中＜img＞的srcset、size属性及＜picture＞介绍
img标签srcset.sizes属性 (HTML 5.1规范) srcset用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像.描述符x表示图像的像素密度,描述符w表示图像的宽度:浏览 ...

img srcset 和 sizes

img srcset 和 sizes相关推荐

最新文章

热门文章