無法將圖像的寬度和高度固定爲100％

-1

我正在研究角度和自舉應用程序。我在我的應用程序中實施了bootstrap輪播。面對寬度和高度調整大小的問題。無法將圖像的寬度和高度固定爲100％

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

來源

2017-06-19 user222

始終存在有標籤和旋轉木馬的一個問題。當你渲染圖表時。如果選項卡或傳送帶不活動，它將無法正確渲染圖表。所以我找到了解決方案。

發現在新的代碼這一切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

來源

2017-06-19 10:37:00

謝謝，我」米試圖在我的應用程序中實現相同。出了點問題，試圖弄清楚。我們可以不使用jQuery而只使用css嗎？感謝你的幫助。 – user222

不需要使用jquery或javascript。 –

如果你接受它作爲正確的答案，將不勝感激。 –

無法將圖像的寬度和高度固定爲100％

回答

相關問題