开发者社区> 问答> 正文

做移动端web页面的时候,如何让全屏图片适应不同的分辨率并且不变形呢?

想要有全屏滚动的banner,以及全屏图片,增加剪切效果。

但是iphone456的尺寸都不一样,如何适配呢,android更是头疼

拉伸图片会导致图片变形失真,有没有不用拉伸的办法呢

展开
收起
杨冬芳 2016-06-03 10:42:42 3566 0
1 条回答
写回答
取消 提交回答
  • IT从业

    将图片做为背景,然后设置background-size;对于容器的宽、高可以考虑用rem单位,然后动态计算html标签的font-size值;

    //- 设置html标签font-size
    (function (doc, win) {
        var _root = doc.documentElement,
            resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
            resizeCallback = function () {
                var clientWidth = _root.clientWidth,
                    fontSize = 20;
                if (!clientWidth) return;
                if(clientWidth < 640) {
                    fontSize = 20 * (clientWidth / 320);
                } else {
                    fontSize = 20 * (640 / 320);
                }
                _root.style.fontSize = fontSize + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvent, resizeCallback, false);
        doc.addEventListener('DOMContentLoaded', resizeCallback, false);
    })(document, window);
    2019-07-17 19:26:13
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Web应用系统性能优化 立即下载
高性能Web架构之缓存体系 立即下载
PWA:移动Web的现在与未来 立即下载