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

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

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

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

前端

html5 css javascript riotjs

阅读 32.6k

8 个回答

✓ 已被采纳

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

黑色杜克

41331217

发布于
2015-06-30

我一般都是这样做的
.container{
width:100%;
height:100%;
min-height:100%;
}
有的时候需要比较精确的计算，就用js计算出来高度，给赋值给height就行了

tiaozi0912

2332

发布于
2015-06-30

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

假如有以下的html:

<html>
  <head>...</head>
  <body>
    <div class="container"></div>
  </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不是所有的浏览器都支持

五十弦

5836

发布于
2015-06-30

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

freedom_melody

1722

发布于
2015-07-01

/* 关键字 */
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属性