Вот мой полный код контактной формы, где карты и карта Google расположены рядом. Но когда я изменяю размер окна, размер карты Google автоматически уменьшается. Я пробую некоторые решения, которые уже опубликованы здесь, но не работаютПожалуйста, помогите мне. Как решить эту проблему и исправить карту Google в том же размере?Может кто-нибудь мне помочь?
Заранее спасибо:)
.contact .iframe-container{ position: relative; width: 100%; padding-bottom: 56.25%; } .contact .iframe-container > *{ display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin:0; padding: 0; height: 100%; width: 100%; } .contact #heading { } .contact .card { display: inline-block; margin: 1rem; position: relative; } .contact .card-4 , .card-5 ,.card-6 { height: 80px; width: 250px; } .contact .container { margin:0px; }
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> <!--jQuery library--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!--Latest compiled and minified JavaScript--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="contact"> <div class="row"> <div class="container"> <div class="col-12 col-sm-6"> <div class="card card-4"><p>card 1</p></div> <div class="card card-5"><p>card 2 </p></div> <div class="card card-6"><p>card 3</p></div> </div> <div class="col-12 col-sm-6" id="heading"> <div class="iframe-container"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241316.6433229747!2d72.74109780863925!3d19.082522323775425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c6306644edc1%3A0x5da4ed8f8d648c69!2sMumbai%2C+Maharashtra!5e0!3m2!1sen!2sin!4v1554386783773!5m2!1sen!2sin" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div> </div> </div> </body> </html>