Как делать responsive карту Google Maps

Как я могу делать responsivo, присоединив карту google maps?

Например, это линия маркировки, которую тебе производит google, чтобы это вводить в твоем html:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13566.89508901391!2d35.2354079!3d31.7780191!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe33f01a44e2808aa!2sDome+of+the+Rock!5e0!3m2!1ses-419!2smx!4v1477799410016" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

В листе CSS: как я могу делать это responsive?

5
задан 30.10.2016, 06:31
3 ответа

Посредством css serГ - в

iframe {
 max-width: 100%;
 height: auto;
}

Другая opciГіn serГ - в aГ±adir iframe внутри одного div и используя bootstrap распределять класс row

<div class="row">
<iframe src="..." width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>
6
ответ дан 24.11.2019, 12:51
  • 1
    Большое спасибо @Dev. Joelme sirvi и # 243; твой пример, и я сделал изменения для того, чтобы он приспосабливался как будто это был мой foorter – Soter Ramirez 31.10.2016, 19:55

Я обычно использую 100 % шириной и установленную высоту вместо автоматического. Например:

iframe {
    width: 100%;
    height: 400px;
}

Если установленной высоты не достаточно для тебя, ты можешь делать, что он меняется с условным CSS как высотой экрана.

2
ответ дан 24.11.2019, 12:51

Не используй <iframe>, помести это в div и лиши его свойств width и height.

Добавь класс, и уже с этим используя средний показатель queries ты это делаешь responsive как любой другой элемент.

0
ответ дан 24.11.2019, 12:51
  • 1
    Привет @Diego Шрифты. и #161; Желанный в Стакк Оверфлов в espaГ±ol и спасибо за достигание! и #191; Podr и # 237; схвати объяснять c и # 243; mo это решать и # 237; в реализованный вопрос, показывая с кратким фрагментом c и # 243; я говорю c и # 243; mo помогать и # 237; в? С другой стороны, контент карты est и # 225; грузя autom и # 225; ticamente в iframe. и #191; C и # 243; mo грузить и # 237; в используя div? – Mariano 30.10.2016, 06:16

Теги

Похожие вопросы