twitter-bootstrap – 响应式图像：img srcset Bootstrap,加载错

发布时间：2020-12-17 21:35:14 所属栏目：安全来源：网络整理

导读：我正在使用带有响应图像的Bootstrap.我想通过向浏览器提供多种图像大小来优化加载时间.根据 this article,像这样的srcset的简单方法有利于让浏览器选择最佳图像大小： img src="small.jpg" srcset="medium.jpg 1000w,large.jpg 2000w" alt="yah" 我的问题是

我正在使用带有响应图像的Bootstrap.我想通过向浏览器提供多种图像大小来优化加载时间.根据 this article,像这样的srcset的简单方法有利于让浏览器选择最佳图像大小：

<img src="small.jpg" srcset="medium.jpg 1000w,large.jpg 2000w" alt="yah">

我的问题是将它与Bootstrap img-responsive类相结合,即使只需要一个小的图片,也会加载一个大尺寸的图片.

代码示例：Bootply.使用Chrome进行测试,它内置支持srcset支持！ (其他一些浏览器需要picturefill.js来识别它.)

如果您复制图像的来源(或在“网络”选项卡中查看Chrome开发者工具),您可以看到750宽度版本被加载,并调整为小图像,即使有较小的版本是最佳的使用. (如果加载picturefill JS来支持img srcset,那么在IE和Firefox中也会发生同样的事情.)

我究竟做错了什么？

解决方法

您需要使用sizes属性告诉浏览器图像在设计中的宽度,否则默认为100vw(完整视口).

<img sizes="(max-width: 480px) calc(100vw - 10px),480px" src="small.jpg" srcset="small.jpg 600w,medium.jpg 1000w,large.jpg 2000w" alt="yah" />

如果您可以在CSS中设置宽度,还可以使用lazySizes自动计算尺寸.

使用lazySizes：

<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w,large.jpg 2000w" alt="yah" />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!