Question

我正在尝试增加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;
        }

Answer 1

据我所知，宽度是通过JavaScript设置的，因此会覆盖css规则。如果您使用codepen等服务创建代码的工作演示，也可以更轻松地提供帮助

调整两个动态元素的大小以匹配高度

1 个答案: