使CSS剪辑直接响应

Question

我正在尝试在此处实施一些内容：http://atmapp.io/beta/

我正在裁剪Google地图对象，以适应手机区域。它在1920x1080上工作得很好（主要是因为我硬编码了rect的值）。如何使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)');
});

修改

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

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>