img {
/* min-width 和 min-height 构成了虚拟的容器 */
min-width: 50.37037037037037%; /* w3 = (w/v)*u 其中 w = 544，v = 1080 */
min-height: 7.395833333333333%; /* h3 = (h/g)*f 其中 h = 142，g = 1920 */
zoom: .1;
/* x4 = m*u + (x - m*v)/w*w1 */
/* y4 = n*f + (y - n*g)/h*h1 */
position: absolute;
left: 50%; /* m*u 其中 m = .5*/
top: 50%; /* n*f 其中 n = .5 */
transform:
translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277，m = .5，v = 1080，w = 544 */
translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<img src="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</body>
</html>
background 实现示例
background-size 值为
contain 时对应 contain 适配。
background-size 值为
cover 时对应 cover 适配。
background-size 值为
100% 100% 时对应 `fill 适配。
background-position 百分比和
o
p 意义相同
<!doctype html>
<html>
<body>
<style>
div {
position: absolute;
width: 50.37037037037037%; /* w3 = w/v*u 其中 w = 544，v = 1080 */
height: 7.395833333333333%; /* h3 = h/g*f 其中 h = 142，g = 1920 */
background: url(http://ui.qzone.com/544x142) no-repeat; /* 背景图做元素 */
background-size: cover;
left: 25.64814814814815%; /* x3 = x/v*u 其中 x = 277， v = 1080 */
top: 78.02083333333333%; /* y3 = y/g*f 其中 y = 1498， g = 1920 */
background-position-x: -48.34558823529412%; /* o = (x - m*v)/w 其中 m = .5 ， v = 1080，x = 277，w = 544*/
background-position-y: 378.8732394366197%; /* p = (y - n*g)/h 其中 n = .5 ， g = 1920，y = 1498，h = 142*/
}
</style>
<div></div> <!-- 容器 -->
</body>
</html><svg> 实现示例
preserveAspectRatio 的
meetOrSlice 为
meet 时对应 contain 适配。
preserveAspectRatio 的
meetOrSlice 为
slice 时对应 cover 适配。
preserveAspectRatio 值为
none 时对应 fill 适配。
