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

Question

我正在研究角度和自举应用程序。我在我的应用程序中实施了bootstrap轮播。面对宽度和高度调整大小的问题。

演示链接：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> 

后，我刚刚更新了你的代码 DEMO这里将其删除：https://plnkr.co/edit/EoOxuhH8FTPEOTg5MlHH?p=preview