CSS scale height to match width - possibly with a formfactor

Question

I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site   But my question is quite simple  i have    lt div id  map  gt  lt  map gt    and   map  width  100   height  200px     I d like to be able to change the height to a form factor  Like in this  in my dreams CSS    map   width  100   height  width   1 72     I have tried leaving out height  setting to auto  and all sorts of persentages - but only to make the div collapse on me always   I have no problem writing a js-solution  but hope for a simple cleancut CSS solution  possible CSS3  If not possible  what would be the optimal way to js me out of this    timers  events   or the like

User · Answer

Let me describe the JS solution as a separate answer:

function handleResize()
{
  var mapElement = document.getElementById("map");
  mapElement.style.height = (mapElement.offsetWidth * 1.72) + "px";
}

<div id="map" onresize="handleResize()">...</div>

(or register the event listener dynamically).

mapElement.style.width * 1.72 will not work, since it requires that the width be set explicitly on the element, either using the width DOM attribute or in the inline style's width CSS property.

User · Answer

Try viewports  You can use the width data and calculate the height accordingly  This example is for an 150x200px image  width  calc 100vw   2 - 30px   height  calc  100vw 2 - 30px    1 34

User · Answer

map        width  100        height  100vw   1 72

User · Answer

Here it is  Pure CSS  You do need one extra  container  element   The fiddle   tinkerbin  actually   http   tinkerbin com rQ71nWDT  Tinkerbin is dead    The solution   Note I m using an 100  throughout the example  You can use whichever percentage you d like   Since height percentages are relative to the height of the parent element  we can t rely on it  We must rely on something else  Luckily padding is relative to the width - whether it s horizontal or vertical padding  In padding-xyz  100   100  equals 100  of the box s width   Unfortunately  padding is just that  padding  The content-box s height is 0  No problem   Stick an absolutely positioned element  give it 100  width  100  height and use it as your actual content box  The 100  height works because percentage heights on absolutely positioned elements are relative to the padding-box of the box their relatively positioned to   HTML    lt div id  map container  gt     lt div id  map  gt     lt  div gt   lt  div gt       CSS    map container     position  relative    width  100     padding-bottom  100       map     position  absolute    width  100     height  100

User · Answer

video       width  100       position  relative      padding-bottom  56 25      ratio 16 9        video iframe       border  none      position  absolute      width  100       height  100       16 9  padding-bottom   9 16   100   56 25

User · Answer

Solution with Jquery    window  resize function          var width       map   width            map   height width   1 72

User · Answer

I ve made similar thing with YouTube s IFRAME where the iframe is inside a grid that always changed based on portrait landscape so this code worked for  So the code for this question is     Layout resize let height   window innerHeight  let width   window document getElementById  player   parentNode clientWidth      height   width   1 77    lt div id  quot player quot  gt  lt  div gt       etc     function onYouTubeIframeAPIReady                  Layout resize           let height   window innerHeight            let width   window document getElementById  player   parentNode clientWidth                height   width   1 77             player   new YT Player  player                 width   100                height  height                          videoId  currentVideoId              playerVars                   autoplay   0                 loop   0                 mute   0                 controls   0                 enablejsapi   1                 playsinline   0                 rel   0                 widget referrer    http   my domain                                 events                   onReady   onPlayerReady                 onStateChange   onPlayerStateChange                 onError   onError

User · Answer

For this  you will need to utilise JavaScript  or rely on the somewhat supported calc   CSS expression   window addEventListener  resize   function e        var mapElement   document getElementById  map        mapElement style height   mapElement offsetWidth   1 72        Or using CSS calc  see support here  http   caniuse com calc    map       width  100       height  calc 100vw   1 72

User · Answer

I need to do  fluid  rectangles not squares     so THANKS to JOPL      didn t take but a minute       map container        position  relative       width  100        padding-bottom  75        map       position absolute      width 100       height 100

User · Answer

You could try using vw for height  https   developer mozilla org en docs Web CSS length  Something like  div map        width  100        height  60vw      This would set the width of the div to 60  of the viewport width  You will probably need to use calc to adjust to take padding into account

User · Answer

You can set its before and after to force a constant width-to-height ratio  HTML    lt div class  squared  gt  lt  div gt    CSS    squared     background   333    width  300px      squared  before     content        padding-top  100     float  left     squared  after     content        display  block    clear  both

[html] CSS scale height to match width - possibly with a formfactor

Examples related to html

Examples related to css

Examples related to responsive-design