1

Такая задача: поместить на сайт 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;
        }
    }

В чём моя ошибка?

2 ответа 2

2

вместо height используйте padding-bottom

приблизительно так

@AccessMapWidth: 80%;

.AccessMapContainer{
  width: @AccessMapWidth;
  margin: 0 auto;
}
#AccessMap {
  padding-bottom: 56.25%; /* 9/16 */
  background-color: #66ff66;
  height: 0;
  position: relative;
  iframe {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
  }
}
<div class="AccessMapContainer">
  <div id="AccessMap">
    <iframe src="#" frameborder="0" style="border:0" allowfullscreen>
    </iframe>
  </div>
</div>

1

Скорее всего ошибка, в том, что вы задаете высоту в процентах. Готовое решение http://www.mademyday.de/css-height-equals-width-with-pure-css.html, попробуйте адаптировать под себя.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.