我试图增加的规模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;
}
据我所知,宽度是通过 JavaScript 设置的,因此会覆盖 css 规则。如果您使用诸如 codepen 之类的服务来创建代码的工作演示,则更容易获得帮助
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句