Такая задача: поместить на сайт google-карту, размеры которой определяются размерами родительского контейнера. Размеры же самого родительского контейнера определяются относительной шириной (допустим, 80%).
<div id="AccessMap">
<iframe src="..." frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>
Проблема, с которой я столкнулся - LESS
не конвертирует проценты в абсолютные величины, т. е. например
@AccessMapRatio: 9/16; // Пусть соотношение сторон карты будет 16:9
@AccessMapWidth: 80%;
@AccessMapHeight: @AccessMapWidth*@AccessMapRatio;
даст результат не в пикселях, а процентах. Я также попробовал
@AccessMapHeight:calc(~'@{AccessMapWidth}*@{AccessMapRatio}');
и даже результат в CSS вроде бы корректный:
height: calc(80%*0.5625);
но всё равно моя карта на 16:9 не похожа.
#AccessMap{
width: @AccessMapWidth;
height: @AccessMapHeight;
margin: 0 auto;
background-color:#66ff66;
iframe{
//width: 100%;
//height: @AccessMapHeight;
}
}
В чём моя ошибка?