如何实现响应式图片

jarisMA

于 2020-01-03 11:17:42 发布

阅读量876

点赞数 1

分类专栏：响应式

本文链接：https://blog.youkuaiyun.com/jarisMA/article/details/103806017

版权

本文详细介绍了实现响应式图片的多种方法，包括js或服务端控制加载、srcset、srcset配合sizes、picture标签以及svg。每种方法都有其优缺点，如srcset按屏幕大小切换图片，picture标签提供更高的灵活性，而svg适合图标，能实现矢量图的缩放不失真。此外，还提到了pollyfill和picturefill插件用于兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何实现响应式图片

一、js或服务端控制图片加载

eg： js控制图片加载：

function makeImageResponsive() {
   
  var width = document.body.getBoundingClientRect().width // 获取当前视口宽度
  var img = document.getElementsByTagName('img')[0] // 获取需要切换图片的元素
  // 判断不同视口宽度展示不同图片
  if (width <= 480) {
   
    img.setAttribute('src', '480.png')
  } else if (width <= 800) {

最低0.47元/天解锁文章