Such a task: put a google-map on the site, the size of which is determined by the size of the parent container. The size of the parent container itself is determined by the relative width (say, 80%).

<div id="AccessMap"> <iframe src="..." frameborder="0" style="border:0" allowfullscreen> </iframe> </div>

The problem I encountered is that LESS does not convert percentages into absolute values, that is, for example

 @AccessMapRatio: 9/16; // Пусть соотношение сторон карты будет 16:9 @AccessMapWidth: 80%; @AccessMapHeight: @AccessMapWidth*@AccessMapRatio;

will not result in pixels, but in percentages. I also tried

 @AccessMapHeight:calc(~'@{AccessMapWidth}*@{AccessMapRatio}');

and even the result in CSS seems to be correct:

 height: calc(80%*0.5625);

but still my map does not look like 16: 9.

 #AccessMap{ width: @AccessMapWidth; height: @AccessMapHeight; margin: 0 auto; background-color:#66ff66; iframe{ //width: 100%; //height: @AccessMapHeight; } }

What's my mistake?

    2 answers 2

    instead of height use padding-bottom

    something like this

     @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>

      Most likely the error is that you set the height in percent. Ready-made solution http://www.mademyday.de/css-height-equals-width-with-pure-css.html , try to adapt for yourself.