調整兩個動態元素的大小以匹配高度

我正在嘗試增加ion-slide和img的大小以使其相互匹配。調整兩個動態元素的大小以匹配高度

我正在嘗試使用CSS來做到這一點，但我並沒有設法增加兩者的大小。

HTML：

<ion-view view-title="Prefeitura Municipal"> 
    <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
      </button> 
    </ion-nav-buttons> 

    <ion-content> 

      <ion-slide-box> 

      <ion-slide> 
       <div class = "box boxImagem"> 
        <img ng-src="img/Boletos.jpg" class="minha-imagem"> 
       </div> 
      </ion-slide> 

      <ion-slide> 
       <div class = "box boxImagem2"> 
        <img ng-src="img/Arraiá.jpg" class="minha-imagem"> 
       </div> 
      </ion-slide> 

      <ion-slide> 
       <div class = "box boxImagem3"> 
        <img ng-src="img/Alimentação.jpg" class="minha-imagem"> 
       </div> 
      </ion-slide> 

      </ion-slide-box> 

      <div> 
      <div class="row icon-row"> 
       <ion-item class="col text-center"> 
        <img class="full-image" src="img/capitol-building.png"></img> 
        <br>Prefeitura 
       </ion-item> 
       <ion-item class="col text-center"> 
        <img class="full-image" src="img/leader-with-loudspeaker.png" ui-sref="app.principal"></img> 
        <br>Ouvidoria<br> 
       </ion-item> 
       <ion-item class="col text-center"> 
        <img class="full-image" src="img/earth-pictures.png"></img> 
        <br>Turismo<br> 
       </ion-item> 
      </div> 
      <div class="row icon-row"> 
       <ion-item class="col text-center"> 
        <img class="full-image" src="img/college-graduation.png"></img> 
        <br>Educação <br> 
       </ion-item> 
       <ion-item class="col text-center"> 
        <img class="full-image" src="img/doctor-stethoscope.png"></img> 
        <br>Saúde 
       </ion-item> 
       <ion-item class="col text-center"> 
        <img class="full-image" src="img/bus-service.png"></img> 
        <br>Serviços<br>Públicos 
       </ion-item> 
       <!-- <ion-item class="col text-center"> 
        <a class="botao button button-positive" href="#/app/site">Icon</a> 
        <br>Site 
       </ion-item> --> 
      </div> 
     </div> 

    </ion-content> 
    <div class="bar bar-footer bar-balanced"> 
     <button class="button icon ion-android-home">Inicio</button> 
     <h1 class="title">Prefeitura</h1> 
     <button class="button icon ion-earth pull-right">Site</button> 
    </div> 
</ion-view>

CSS

boxImgem, .boxImagem2, .boxImagem3{ 
      width: 100%; 
      height: 100%; 

     } 
     .minha-imagem{ 
      float: left; 
      width: 100%; 
      text-align: center; 
      margin: 0px 0px 0; 
     }

來源

2017-06-27 Lucas Santos

使其成爲工作代碼 – DCR

什麼？我不明白@DCR –

如果您提供了一個工作片段，則更容易讓某人處理您的代碼。當你問你的問題時按下ctrl m – DCR

據我所知寬度通過JavaScript設置，因此將覆蓋的CSS規則。如果您使用服務（如codepen）創建代碼的工作演示，它也更容易提供幫助

來源

2017-06-27 15:54:05

非常感謝你，我能夠在多個手機屏幕上進行測試。下次我把代碼放在codepen中時，我從來沒有用它來提示疑問，非常感謝小費。 –

調整兩個動態元素的大小以匹配高度

回答

相關問題