开发者社区 问答 正文

css 有什么办法支持高清屏下 图片适配 怎么做

我知道可以用-webkit-image-set

不过firefox edge ie11好像不行

只要支持到ie11 firefox edge

我找到一种写法
grace的写法是什么意思 为什么要在media后在加个background-size


.foo {
  background-image: url(../../src/img/daojianshenyu@1x.jpg);
  background-image: -webkit-image-set(url(../../src/img/daojianshenyu@1x.jpg) 1x, url(../../src/img/daojianshenyu@2x.jpg) 2x); }

@media only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .foo {
    background-image: url(../../src/img/daojianshenyu@2x.jpg);
    background-size: 512px 272.5px; } }

展开
收起
杨冬芳 2016-05-31 15:04:54 2067 分享 版权
1 条回答
写回答
取消 提交回答
  • IT从业

    主要有四种实现方式:

    1. media query + pixel-ratio 实现
    2. img标签引用的不同大小图片,通过retina.js根据设备自动替换图片地址
    3. image-set 实现(不兼容微信浏览器)
    4. svg 实现
    2019-07-17 19:21:59
    赞同 展开评论
问答分类:
问答标签:
问答地址: