javascript - 做移动端web页面的时候，如何让全屏图片适应不同的分辨率并且不变形呢?-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

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

巴扎黑 2017-04-10 15:40:48

[JavaScript讨论组]

700

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

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

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

巴扎黑

全部回复(7)

怪我咯2017-04-10 15:42:48 7楼

****好的我觉得可以这么做的## 标题文字 ##

赞 +0

添加回复

大家讲道理2017-04-10 15:42:48 6楼

@黑色杜克的css要在一定的条件下才会有用。条件就是.container的所有的parent element的height都应该赋值了。

假如有以下的html:

<html>
  <head>...</head>
  <body>
    <p class="container"></p>
  </body>
</html>

你的css应该是:

html, body {
  height: 100%;
}

container {
  width: 100%;
  height: 100%;
}

关键点是需要把html, body的height也设置成100%；

另外, 也可以用vh, vw

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly

对于height, 只需height: 100vh;
vw, vh不是所有的浏览器都支持

赞 +0

添加回复

巴扎黑2017-04-10 15:42:48 5楼

谷歌调试中就有手机端界面，根据设备尺寸，多写点媒体查询

赞 +0

添加回复

PHP中文网2017-04-10 15:42:48 4楼

/* 关键字 */
background-size: cover
background-size: contain
或者

.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

效果链接

具体的api属性

赞 +0

添加回复

黄舟2017-04-10 15:42:48 3楼

我也是有同样的问题，现在我一般就是用rem做的，但是计算根元素的font-size，还是会有些问题。

赞 +0

添加回复

黄舟2017-04-10 15:42:48 2楼

将图片做为背景，然后设置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);

赞 +0

添加回复