有个需求是要层叠两张图，就像你现在看到的：整个浏览器和html页面，内层图片要水平居中，等比例与源UI图适配不同设备
本来很简单的使用 vw vh了（
核心代码
top: 13.25vh;
left: 50%;
margin-left: -32.31vw;
width: 64.62vw;
height: 61.56vh;
），但是发觉不太居中，而且考虑到移植的兼容性，还是用jq搞了一遍：
(function () {
var size = {
uiImage: [530, 830],
widthHeight: [340, 510],
leftTop: [94, 110]
};
$('.top').css(getCss(size));
function getCss(sizeSrc) {
function ratio(arrTop, arrBottom) {
var arr = [];
for (var i = 0, j = arrTop.length; i < j; i++) {
arr[i] = arrTop[i] / arrBottom[i];
}
return arr;
}
var realSize, ratios, outSize, outLeftTop, ops;
realSize = [$(window).width(), $(window).height()];
ratios = ratio(sizeSrc.uiImage, realSize);
outSize = ratio(sizeSrc.widthHeight, ratios);
outLeftTop = ratio(sizeSrc.leftTop, ratios);
ops = {
width: outSize[0],
height: outSize[1],
left: outLeftTop[0],
top: outLeftTop[1]
};
return ops;
}
}())
考虑到不想再新建一个js文件，再次包装下：
<div class="top-image" ui-image="530,830" width-height="340,510" left-top="94,110" ></div>
(function () {
var obj = $('.top-image');
obj.css(getCss({
uiImage: obj.attr('ui-image').split(','),
widthHeight: obj.attr('width-height').split(','),
leftTop: obj.attr('left-top').split(',')
}));
function getCss(sizeSrc) {
function ratio(arrTop, arrBottom) {
var arr = [];
for (var i = 0, j = arrTop.length; i < j; i++) {
arr[i] = arrTop[i] / arrBottom[i];
}
return arr;
}
var realSize, ratios, outSize, outLeftTop, ops;
realSize = [$(window).width(), $(window).height()];
ratios = ratio(sizeSrc.uiImage, realSize);
outSize = ratio(sizeSrc.widthHeight, ratios);
outLeftTop = ratio(sizeSrc.leftTop, ratios);
ops = {
width: outSize[0],
height: outSize[1],
left: outLeftTop[0],
top: outLeftTop[1]
};
return ops;
}
}())