Адаптируемый размер для встроенного кода карт Google - CSS / HTML

Question

Я - полный новичок в CSS и HTML, и я создаю свою первую базовую страницу для обучения.

Я хочу сделать масштаб встроенной карты Google в соответствии с размером браузераокно.Каковы ваши предложения?Есть ли способ использовать встроенный код в классе CSS?Как бы вы это сделали?

Пример кода Google Maps:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pt/maps?f=q&amp;source=s_q&amp;hl=pt-PT&amp;geocode=&amp;q=lisbon,+portugal&amp;aq=&amp;sll=39.399872,-8.224454&amp;sspn=36.11675,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Lisboa&amp;t=h&amp;z=11&amp;iwloc=A&amp;ll=38.706932,-9.135632&amp;output=embed"></iframe><br /><small><a href="http://maps.google.pt/maps?f=q&amp;source=embed&amp;hl=pt-PT&amp;geocode=&amp;q=lisbon,+portugal&amp;aq=&amp;sll=39.399872,-8.224454&amp;sspn=36.11675,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Lisboa&amp;t=h&amp;z=11&amp;iwloc=A&amp;ll=38.706932,-9.135632" style="color:#0000FF;text-align:left">Ver mapa maior</a></small>

Answer 1

Таким образом, один вариант - просто изменить атрибуты ширины и высоты на проценты.

<iframe width="50%" height="50%"...

Другой вариант - вынуть эти атрибуты и создать селектор элемента CSS в таблице стилей

iframe{width:50%;height:50%;}

Если вы добавите атрибут класса, скажите:

<iframe class="map"...

Вы можете дополнительно указать свой класс:

iframe.map{width:50%;height:50%;}

Sitepoint имеет хорошую ссылку CSS: http://reference.sitepoint.com/css

Answer 2

Проверьте эти две ссылки. Первый показывает код, второй показывает результат

http://www.leapbeyond.com/ric/scuba/appletdemo/FullScreenMapCode.htm

http://www.leapbeyond.com/ric/scuba/appletdemo/FullScreenMap.htm