Создания CSS клип Прямоугольник отзывчивый

Я пытаюсь осуществить кое-что здесь: http://atmapp.io/beta/Создания CSS клип Прямоугольник отзывчивый

Я вырезка объекта Google Maps, чтобы поместиться в области телефона. Он отлично работает на 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)'); 
});

EDIT

Для тех, кому интересно, это как карта должна «соответствовать»: enter image description here

источник

2015-06-10 Alex Weyland

Так что это проблема? Страница отлично работает на моем iPhone. – idmean

Чтобы клик работал с адаптивным расположением, вам нужно будет использовать процентные значения. Процентные значения не поддерживаются для клипа. Вместо этого вы можете попробовать использовать клип-путь. Проверьте http://species-in-pieces.com/# – Jackson

@idmean, вторая карта не отображается на мобильных устройствах. –

Использование 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>

источник

2016-06-23 13:18:21 Qwertiy

Создания CSS клип Прямоугольник отзывчивый

ответ

Смежные вопросы