设置谷歌地图容器大小等于md卡内容宽度

Question

如何设置谷歌地图div容器大小等于md卡内容宽度？

我有以下代码，但它不起作用。

<style> #map { width: 100%; height: 100%; } </style> 

<md-card flex> 
    <md-card-content> 
     <div layout="column"> 
      <md-input-container flex="100"> 
      <!-- ... --> 
      <div id="map"></div> 
     </div> 
    </md-card-content> 
</md-card> 

我尝试以下解决方案（link，link），但它并没有为我工作。我也试过 我会希望得到的是这样的：

Answer 1

我不使用的角度，但我会说这是因为高度是不是一个父容器设置。 从你发布的图片看来，你想要平方地图。 可以使用填充特技保持高宽比：

.map-container { 
 
    position: relative; 
 
} 
 

 
.map-container:before { 
 
    display: block; 
 
    content: ''; 
 
    padding-top: 100%; 
 
} 
 

 
#map { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: tomato; /* only for testing */ 
 
}

<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet"/> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 

 
<md-card flex> 
 
    <md-card-content> 
 
     <div layout="column"> 
 
      <md-input-container flex="100">input</md-input-container> 
 
      <!-- ... --> 
 
      <div class="map-container"> 
 
       <div id="map"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </md-card-content> 
 
</md-card>