首页 » 网站建设 »

img元素的srcset属性和浏览器

2019年7月28日 / 17次阅读
CSSHTML

img元素的srcset属性,表示让浏览器自己根据客户端的窗口尺寸,选择最合适的图片资源。srcset属性里面一般会提供相同图片的几种不同的尺寸规格供选择。

举个例子:

<img class="pure-img wp-image-22094 size-full" src="https://www.maixj.net/pics/uploads/2019/07/firefox_http.jpg" sizes="(max-width: 714px) 100vw, 714px" srcset="https://www.maixj.net/pics/uploads/2019/07/firefox_http.jpg 714w, https://www.maixj.net/pics/uploads/2019/07/firefox_http-149x150.jpg 149w, https://www.maixj.net/pics/uploads/2019/07/firefox_http-400x402.jpg 400w" alt="用Firefox查看HTTP头部信息" width="714" height="718" />

上面一行的srcset,提供了相同图片的三个不同尺寸的规格,分别是宽为714,149,400,单位pixel

wordpress支持这个特性,只要上传一张图片,wordpress系统就会自动根据后台的设计,生成几张不同尺寸的图片。

我想说一下浏览器:

我使用Firefox浏览器,在Firefox中查看元素时(在网页上点右键,选择Inspect Element),srcset元素的内容总是错的:

firefox的srcset显示

firefox的srcset显示

但是,如果是查看网页源代码(在网页上右键,选择View Page Source),这段代码就是对的!

有一阵我还以为是wordpress系统在这个地方有问题呢。现在我认为是Firefox“故意”的。这可能跟它内部代码实现有关系。

Chrome浏览器就不这样,检查元素和查看源代码,两者是一致的。

Anyway,我想说的是,如果你也发现你的网页的srcset里面的字符串看起来是错误的,试着看看网页源代码,这很可能是浏览器的原因。

本文链接:https://www.maixj.net/wz/img-srcset-22161

相关文章

留言区


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top