无法将图像的宽度和高度固定为 100%

Question

我正在研究角度和引导应用程序。我正在我的应用程序中实现引导程序的轮播。面临宽度和高度调整大小的问题。

演示链接：https://plnkr.co/edit/tPKXHeN3JWyqZgOtrTTS?p=preview 当用户点击上面链接中的下一个箭头时，我们可以看到图形，但图形的尺寸减小了。 我希望所有图像/图表都是 100% 的宽度和高度。任何建议都会有所帮助。

css代码：

.panel-info .panel-heading  {
        background-color: #c1c6dd;
    }

    .carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }

    .carousel-indicators {
        right: 50%;
        top: auto;
        bottom: -10px;
        margin-right: -19px;
    }

    .carousel-indicators li {
        background: #cecece;
    }

    .carousel-indicators .active {
        background: #428bca;
    }

    .carousel-control.left, .carousel-control.right {
        color: #2fa4e7;
        background-image: none;
    }

    .carousel-control {
        z-index: 10;
        top: 2%;
        width: 30px; 
    font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    .carousel-control.left { left: -10px; }
    .carousel-control.right { right: -10px; }


    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
        font-size: 70px;
        margin-left : -17px;
        margin-right : 24px
    }

html代码：

  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">

      <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>

      </ol>
      <div class="carousel-inner">
     <div id='id1' class="item active">
      <table style="width:100%;height:80%;">
      <tr>
     <td id="id1td"  ng-controller="myController1">
      <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
   </td>
    </tr>
    </table>

    </div>

    <div id='id2' class="item" ng-controller="myController2">
    <table style="width:100%;height:90%;">
      <tr style="height:5%;">
       <td>
         <h1>Title and some content goes here----</h1>
         </td>
    <tr style="height:85%;">

    <td id="id2td">
    <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
    </td>
    </tr>
    </table>

    </div>

    </div> 

      <!-- Left and right controls -->
       <span class="left carousel-control" href="#myCarousel" data-slide="prev" >
                                         <span class="glyphicon glyphicon-chevron-left"></span>
                                     </span>
                                     <span class="right carousel-control" href="#myCarousel" data-slide="next">
                                         <span class="glyphicon glyphicon-chevron-right"></span>
        </span>
</div>

Answer 1

标签和轮播总是存在问题。当你渲染图表时。如果选项卡或轮播未处于活动状态，它将无法正确呈现图表。所以我找到了解决方案。

在新代码中找到所有delete-me 类，它只在 index.html 文件中，并在页面加载后删除它们

<script type="text/javascript" charset="utf-8">
   setTimeout(function() {
     $('.delete-me').removeClass('active delete-me');
   }, 500);
</script>

我刚刚更新了你的代码 在这里演示：https://plnkr.co/edit/EoOxuhH8FTPEOTg5MlHH?p=preview