Отзывчивые встроенные карты Google - PullRequest
Новая
       20

Отзывчивые встроенные карты Google

0 голосов
/ 07 января 2019

Итак, я знаю отзывчивое поведение, показанное многими членами сообщества как:

HTML 

<div class="map-responsive">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="380" height="440" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

и css 

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

То, что я пытаюсь сделать, это иметь макет столбца начальной загрузки 2, где 1-й столбец имеет изображение, а 2-й столбец имеет карту. и проблемы:

  1. равная высота
  2. Отзывчивое поведение

Вот код 

<div class="container-fluid px-0">
<div class="row mx-0">
    <div class="flex-grow-0">
        <img class="img-fluid" src="https://devs.kodenlogix.com/mtmgrp/mtmglobal/wp-content/uploads/2019/01/contactus-img.jpg" alt="Contact">
    </div>
    <div class="flex-grow-1 map-responsive">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="380" height="440" frameborder="0" style="border:0" allowfullscreen=""></iframe>
    </div>
</div>

Для справки, вот страница, над которой я работаю: Sample

1 Ответ

0 голосов
/ 07 января 2019

Попробуй это. Измените ширину на 100% в iframe и удалите height:100%; из .map-responsive iframe

<iframe src="https://www.google.com/maps/embed? pb=!1m18!1m12!1m3!1d15288.360926048195!2d51.52175762195133!3d25.282422800605804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45c534ffdce87f%3A0x1cfa88cf812b4032!2sQatar!5e0!3m2!1sen!2s!4v1546430525796" width="100%" height="440" frameborder="0" style="border:0" allowfullscreen=""></iframe>

Посмотрите на код этого JSFIDDLE , я вообще не использую ваш css.

...