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

Question

I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site.
But my question is quite simple: i have:
<div id="map"></map>
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)

Answer 1

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:
<div id="map_container">
<div id="map">
</div>
</div>
CSS:
#map_container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}

Answer 2

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 …

Answer 3

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)
}

Answer 4

.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

Answer 5

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);

Answer 6

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%;
}

Answer 7

You can use CSS like this to crop the image to a certain ratio and then using object-fit to center the image as you want.
CSS:
.ratio-crop {
aspect-ratio: 1.72 / 1; //using the example size in the question
object-fit: cover;
}
HTML:
<img src="/images.jpg" class="ratio-crop">

Answer 8

You can set its before and after to force a constant width-to-height ratio
HTML:
<div class="squared"></div>
CSS:
.squared {
background: #333;
width: 300px;
}
.squared::before {
content: '';
padding-top: 100%;
float: left;
}
.squared::after {
content: '';
display: block;
clear: both;
}

Answer 9

Solution with Jquery
$(window).resize(function () {
var width = $("#map").width();
$("#map").height(width * 1.72);
});

Answer 10

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;
<div id="player"></div>
... 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
}
});
}

Answer 11

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.

Answer 12

#map {
width: 100%;
height: 100vw * 1.72
}