У меня есть изображение на карте, в оверлее изображения я установил границы (слева вверху и справа внизу), но изображение имеет некоторую растяжку, оно выше ширины, а исходное изображение квадратное (558x558), яположить маркеры, где должны идти границы.Я не могу решить эту проблему.Большое спасибо.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Pruebas2</title>
<!-- LEAFLET -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<!-- Estilos -->
<link rel="stylesheet" href="estilos.css">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="contenedorMapa" style="width: 100%"></div>
<script> /*MAPA EN TODA LA PANTALLA*/ $('#contenedorMapa').height(window.innerHeight);
</script>
<script> // TIPOS DE MAPAS
var map = L.map('contenedorMapa').setView([22.387672, -97.925450], 7);
//[21.893950, -101.440188]
var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: ''
}).addTo(map);
</script>
<script>
var marker13 = L.marker([25.078983, -100.772610]).addTo(map)
.bindPopup('supe-iz');
var marker13 = L.marker([19.696318, -95.078198]).addTo(map)
.bindPopup('inf-der');
</script>
<script>
var imageUr6 = 'ecos/altamira/ppi3/ULTIMA.gif';
var bordes6 = [[25.078983, -100.772610], [19.696318, -95.078198]];
var imagen6 = L.imageOverlay(imageUr6, bordes6, {
opacity: 0.7
}).addTo(map);
</script>
</body>
</html>
введите описание изображения здесь