Google Map vertically responsive like a img-responsive image in Bootstrap 3?

Question

I'm trying to make a Google Map behave like an image with img-responsive in Bootstrap. I just added the 'img-responsive' class to the div element containing the map. The map has a style that specify width and height in pixels.

The problem is the Map doesn't resize vertically but it keeps the size defined in its style. On the contrary, the width changes according to he screen size.

The Map is define just like this. There's no additional CSS.

<div class="img-responsive" style="width:500px;height:300px"></div>

EDIT:

seeing that I was down voted, I'll try to be clearer: I'd like to get if it is possible to get a vertical resizing via CSS or I should go for some JavaScript trick.

Answer 1

The only way I've found to get what I want is via JavaScript. I got inspired by this post