个人中心
gpt4 book ai didi

javascript - 如何使响应式 iframe 谷歌地图全屏显示

转载 作者：行者123 更新时间：2023-11-28 01:12:31 24 4
gpt4 key购买 nike

我正在尝试使用 iframe 在网站中嵌入谷歌地图。本地图显示时，我需要这张 map 在任何设备上全屏显示。我想不出办法做到这一点，尝试将宽度和高度设置为 100%，这使它看起来像这样:enter image description here但是现在我的网站看起来像这样: enter image description here

有什么方法可以让 map 全屏吗？

$(document).ready(function() {
    $(".menu-icon").on("click", function() {
          $("nav ul").toggleClass("showing");
    });
});

// Scrolling Effect

$(window).on("scroll", function() {
    if($(window).scrollTop()) {
          $('nav').addClass('black');
    }

    else {
          $('nav').removeClass('black');
    }
})
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
    height:100%;

}


.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

nav.black .logo {
    color: #fff;
}

nav.black ul li a {
   color: #fff;
}

.menu-text {
    color: #000;
    z-index:1;
}


.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #000;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    z-index: 0;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 786px) {

    .logo {
          position: fixed;
          top: 0;
          margin-top: 16px;
    }

    nav ul {
          max-height: 0px;
          background: #000;
    }

    nav.black ul {
          background: #000;
    }

    .showing {
          max-height: 34em;
    }

    nav ul li {
          box-sizing: border-box;
          width: 100%;
          padding: 24px;
          text-align: center;
    }

    .menu-icon {
          display: block;
    }

}
<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Responsive Sticky Navbar</title>
        <link rel="stylesheet" href="location-style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <nav>
            <div class="menu-icon">
                <i class="fa fa-bars fa-2x"></i>
            </div>

            <div class="logo">
                Croydon Cycles
            </div>

            <div class="menu">
                <ul>
                    <li><a class="menu-text" href="index.html">Home</a></li>
                    <li><a class="menu-text" href="location.html">Location</a></li>
                    <li><a class="menu-text" href="shop.html">Shop</a></li>
                    <li><a class="menu-text" href="contact.html">Contact</a></li>
                </ul>
            </div>
        </nav>
      </header>
    </div>
    <div class="box">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>


    </div>


    </div>

  </body>
</html>

最佳答案

抱歉，我现在无法真正调整您的 css，但这是我在需要在 iframe 中输出 YouTube 视频时想到的一些东西。试试看

<style>
       #mediaPlayer{
        position: relative;
        height: auto;
        padding-bottom: 56.25%;
        padding-top: 1.875em; 
        overflow: hidden;
        border: 0.1875em double #185875; 
        background-image:url('../video_loading.gif'); 
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: center;
        background-attachment: fixed;
        /*to adjust the height and width*/
        margin-right: 20%;
        margin-left: 20%;
        margin-top: 20%;
        margin-bottom: 20%;
        /*or you can use it in single line*/
        margin:20%;
        /*or if you want different margins for different sides in a single line*/
        margin: 20% 20% 20% 20%;
        /* the above means margin: top right bottom left; */
       }

    #mediaPlayer iframe{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;   
    }
</style>

/*instead of using margin just add a div and specify the exact height and width you want*/ 
<div style="height: 50%; width:50%;">
 <center>
  <div id="mediaPlayer">
    <iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
 </center>
</div>

video_loading.gif对于网络速度较慢的用户来说，在您的 iframe 内容加载时背景通常是一个好主意

但您必须找到自己独特的 gif 文件/图像并将其位置设置在 background-image:url('../file-location-here.gif'); 中

只需更换您的 <div class="box"></div>使用上面的代码让我知道结果如何。

关于javascript - 如何使响应式 iframe 谷歌地图全屏显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52030012/

24 4 0
文章推荐： c++ - 如何使用 C++ 与 asmx 服务通信
文章推荐： html - 用 roboto 替换 Lato 字体
文章推荐： c++ - 尝试打印值时出现 bad_alloc 异常
文章推荐： c++ - 从 C# 背景学习 C++
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com