Responsywna ramka iframe (google maps) i dziwna zmiana rozmiaru
Próbuję dodać Mapę Google do mojego projektu, który powinien odpowiadać. Użyłem tego samego kodu, który działa dla obrazów ... Ale z jakiegoś powodu iframe mapy zmienia rozmiar z wymiarami, których nie wybrałem.
HTML
<iframe src="http://maps.google.com/maps/ms?vpsrc=6&ctz=-480&ie=UTF8&msa=0&msid=210840796990572645528.00049770919ccd6759de3&t=m&ll=30.751278,68.203125&spn=84.446143,175.429688&z=2&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>
i CSS
iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}
Możesz też obejrzeć go na żywo i bawić się tutaj:http://jsfiddle.net/corinne/pKUzU/ (Jeśli odetniesz CSS, zobaczysz, co mam na myśli).
Moje pytanie brzmi: jak sprawić, by ta ramka / mapa była responsywna bez utraty pożądanej wysokości?