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:

Answer 1

You can set its before and after to force a constant width-to-height ratio

HTML:

CSS:

.squared {
  background: #333;
  width: 300px; 
}
.squared::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.squared::after {
  content: '';
  display: block;
  clear: both;
}