jquery - 使 CSS 剪辑矩形响应

Question

我想在这里实现一些东西:http://atmapp.io/beta/

我正在裁剪一个 Google map 对象，以适应手机区域。它在 1920x1080 上运行良好(主要是因为我硬编码了矩形的值)。如何使 clip: 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)');
});

编辑

对于那些想知道的人，这就是 map 应该“适合”的方式:

Answer 1

将 clip-path 与 inset 基本形状一起使用，而不是弃用的 clip。
不要忘记 -webkit 前缀。

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: -1px;
  border: 1px solid transparent;
}

section {
  margin: 1em;
  width: 50%;
  height: 50%;
  border: 1px dotted blue;
}
  
div {
  width: 100%;
  height: 100%;
  background: red;
  -webkit-clip-path: inset(50% 0 4px 1em);
  clip-path: inset(50% 0 4px 1em);
}

<section><div></div></section>