【问题标题】:HTML5 Responsive ImagesHTML5 响应式图片
【发布时间】:2017-10-20 15:36:22
【问题描述】:

响应式图片的最佳解决方案是什么? img srcset 属性还是 <picture> 元素?有什么区别?

http://caniuse.com/#feat=srcset
http://caniuse.com/#feat=picture

有没有我可以使用的好的惰性加载器/响应式图像 jQuery 插件,或者类似的工具?

只是为了表明我做了功课:

【问题讨论】:

  • 使用推特引导
  • 我说的是为不同的屏幕尺寸加载新图像,而不是调整默认图像的大小。 Bootstrap 没有这样的组件。
  • 这里有两个 jQuery 插件,我发现它们完全符合我的要求:* http://www.responsiveimg.com(使用 <img> 标签)* http://jquerypicture.com(使用新的 <figure> 和 @987654334 @ 元素作为一种 polyfill,直到它们被广泛支持。)我可能会推送更新到其中一个或两个以使用新的 Media Querylist 函数,这比 $(window).resize 性能要好得多();

标签: html


【解决方案1】:

你可以使用 css "display:flex;"只需将其应用于图像的父级。

【讨论】:

  • 我说的是为不同的屏幕尺寸加载新图像,而不是调整默认图像的大小。
  • 请更新您的问题以进行澄清。如果我理解你的问题,你可以用 CSS 和媒体查询来做,但如果你想用 JQuery 来做,请查看这个网站:imulus.github.io/retinajs
  • 使用 JS 而不是 CSS 的原因是我们可以为不同的设备加载完全独立的图像。这意味着移动设备的图像将更小,因此加载速度更快。我很抱歉不清楚,但这个答案与img srcset 功能无关。
  • 是的,现在知道了,retina.js 不适合你的需要?
  • 不,因为我正在考虑所有设备,而不仅仅是视网膜。
猜你喜欢
  • 2013-10-27
  • 1970-01-01
  • 2020-03-20
  • 2015-04-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多