做移动端web页面的时候，如何让全屏图片适应不同的分辨率并且不变形呢?
想要有全屏滚动的banner，以及全屏图片，增加剪切效果。
但是iphone456的尺寸都不一样，如何适配呢，android更是头疼
拉伸图片会导致图片变形失真，有没有不用拉伸的办法呢
web前端开发 riotjs html5 css JavaScript
六分仪元渡
9 years, 11 months ago
Answers
/* 关键字 */
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')";
琴吹紬mugi
answered 9 years, 11 months ago
@黑色杜克 的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不是所有的浏览器都支持
柒世纪饭饭
answered 9 years, 11 months ago
将图片做为背景，然后设置
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);
我还没死透
answered 9 years, 11 months ago