原尺寸的Google地图不适合屏幕尺寸

我们正在使用Google Map构建一个涵盖所有主页的Web应用程序。看起来不错，但是当我在另一台计算机上以不同的分辨率或屏幕尺寸打开它时，地图尺寸不会相应改变。

我尝试使用“％”而不是“ px”，但效果更糟，地图消失了。

我发现一些使用“！important”的解决方案，但对我而言不起作用，无法弄清原因。

这是我的地图CSS（级联样式表）：

#google-container {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #e7eaf0;
}

@media only screen and (min-width: 768px) {
    #google-container {
        height: 300px;
    }
}

@media only screen and (min-width: 1170px) {
    #google-container {
        height: 710px;
    }
}

#cd-google-map {
    position: relative;
}

#cd-google-map address {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 1em 1em;
    background-color: rgba(211, 104, 104, 0.9);
    color: white;
    font-size: 13px;
    font-size: 0.8125rem;
}

@media only screen and (min-width: 768px) {
    #cd-google-map address {
        font-size: 15px;
        font-size: 0.9375rem;
        text-align: center;
    }
}

这是我的html（地图在main.js文件中构建）：

    

    

    

    

        
            
        
    























    


    

        

            
            

                
                    
                
            

            

                coco2冰冰            

            

                这个屌丝很懒，什么也没留下！            
            
            


                                
                    
                    关注作者
                            

        
    


    

        
Tags | 热门标签
        

            

                                

                    actionscrip
                
                                

                    bash
                
                                

                    c#
                
                                

                    c++
                
                                

                    c语言
                
                                

                    erlang
                
                                

                    flutter
                
                                

                    go
                
                                

                    golang
                
                                

                    java
                
                                

                    javascript
                
                                

                    lua
                
                                

                    node.js
                
                                

                    perl
                
                                

                    php
                
                                

                    python
                
                                

                    scala
                
                                

                    typescript
                
                                

            
        
    


    

        
RankList | 热门文章
        

            

                                

                    1Rails,Sidekiq  -  Redis NOAUTH
                
                                

                    2反序列化XML  - 对于无符号字节,值太大或太小
                
                                

                    3量角器检查位置路径
                
                                

                    4RavenDB Map减少了不同的索引
                
                                

                    5Yii2注销特定用户
                
                                

                    6如何使用javascript按类名获取价值
                
                                

                    7Xcode中文件夹和组之间的区别？
                
                                

                    8Angular2错误 - 我的登录组件没有提供程序错误
                
                                

                    9SearchView中的onQueryTextSubmit在Android Java中处理两次
                
                                

                    10从Swift_Message对象获取附件列表
                
                                

                    11在JQuery中传递参数来过滤函数
                
                                

                    12React.js在悬停问题上显示组件的一部分
                
                                

                    13使用Uri字符串,可能有也可能没有尾随/
                
                                

                    14确定Touch ID保护的钥匙串项是否存在？
                
                                

                    15C#escape花括号不能使用格式修饰符？
                
                                

                    16EF Code First属性到同一个表
                
                                

                    17Oracle转换表从行到列
                
                                

                    18使用linq拆分并加入C#
                
                                

                    19如何使用Email :: Send :: SMTP :: Gmail向多个收件人发送电子邮件
                
                                

                    20字段上的@ConfigurationProperties