Jquery 使CSS clip rect具有响应性

我试图在这里实现一点东西：

我正在剪辑一个谷歌地图对象，以适合手机区域。它在1920x1080上非常有效（主要是因为我硬编码了rect的值）。如何使

剪辑：rect

响应

我试过使用jQuery，但我是个白痴，而且我可能还差几英里：

CSS

#map-canvas2 {
  width:100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
  bottom: 0;
  clip:rect(191px, 1579px, 732px, 1275px);
}

jQuery

var oldresX = 1920;
var oldresY = 943;
var rectTop = 191;
var rectRight = 1579;
var rectBottom = 732;
var rectLeft = 1275;
var newRectTop;
var newRectRight;
var newRectBottom;
var newRectLeft;

var newResX;
var newResY;


$(window).resize(function(){
    newResY = oldresY - window.innerHeight;
    newResX = oldresX - window.innerWidth;

    newRectTop = rectTop + newResY;
    newRectRight = rectRight - newResX;
    newRectBottom = rectBottom - newResY;
    newRectLeft = rectLeft + newResX;

    //alert(newResX + "x" + newResY);
    $("#map-canvas2").css('clip', 'rect('+newRectTop +'px, '+newRectRight +'px, '+newRectBottom +'px, '+ newRectLeft+'px)');
    //alert('rect('+newRectTop +'px, '+newRectRight +'px, '+newRectBottom +'px, '+ newRectLeft+'px)');
});

编辑

对于那些好奇的人来说，这就是地图应该“适合”的方式：

---

使用

剪辑路径

和

插入

基本形状，而不是不推荐的

剪辑

不要忘记

-webkit

前缀

html，正文{
宽度：100%；
身高：100%；
溢出：隐藏；
}
身体{
保证金：-1px；
边框：1px实心透明；
}
部分{
边缘：1米；
宽度：50%；
身高：50%；
边框：1px点蓝色；
}
div{
宽度：100%；
身高：100%；
背景：红色；
-webkit剪辑路径：插入（50%0 4px 1em）；
剪辑路径：插入（50%0 4px 1em）；
}

---

那么问题出在哪里？该页面在my iPhoneFor clip上运行良好，要使用响应性布局，则需要使用百分比值。但是，片段不支持百分比值。您可以尝试改用剪辑路径。查看@idmean，第二张地图没有显示在手机上。@jackson，谢谢你的提示。我做了，但没有用。我已经更新了页面，所以你可以看到它的运行。