Я пытаюсь добавить карту Google в свой дизайн, который должен быть отзывчивым. Я использовал тот же код, который работает для изображений ... Но по какой-то причине iframe карты изменяет размеры, которые я не выбрал.Отзывчивый iframe (карты google) и странное изменение размера
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>
и CSS
iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}
Или вы можете увидеть его вживую и играть с ним здесь: http://jsfiddle.net/corinne/pKUzU/ (если вы срезаем CSS, вы увидите, что Я имею в виду).
Мой вопрос заключается в том, как сделать этот iframe/map отзывчивым без потери желаемой высоты?
Код выше будет заполнить это контейнер и держать его исходное соотношение сторон. Это хорошо для гибких сеток. Вы можете просто вставить это в любой блок сетки, который вам нравится, и он автоматически будет автоматически изменяться даже при изменении размера. – cpg
большое спасибо, это работает, чудо! :) Хотел бы я дать вам несколько моментов, но, к сожалению, я все еще новичок здесь! – Corinne
@cpg У вас есть ссылка на этот код? Попытка понять это лучше. В частности, он работает без необходимости переполнения: скрытый, возможно, из-за 100% -ного размера iframe? – iamkeir