Я пытаюсь добавить Google Map в свой дизайн, который должен быть адаптивным. Я использовал тот же код, который работает с изображениями ... Но по какой-то причине iframe карты изменяется с размерами, которые я не выбрал.

HTML

<iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300">    </iframe>​

и CSS

iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}

Или вы можете посмотреть его вживую и поиграть с ним здесь: http://jsfiddle.net/corinne/pKUzU/ & # x200B; (если вы отключите CSS, вы поймете, что я имею в виду).

Мой вопрос заключается в том, как сделать так, чтобы этот iframe / map реагировал без потери требуемой высоты?