Why my black banner in the image below always takes a square space (if I inspect the white space above and under the black banner, it’s treated as an image in Google Chrome):
<div *ngIf="modoLoja">
<div class="row" >
<div class="col col-50"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannersmedios[0])" *ngIf="tiposOrganizacao.bannersmedios.length>0" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannersmedios[0].banner_medium_id}}&type=M"/></div>
<div class="col col-50"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannersmedios[1])" *ngIf="tiposOrganizacao.bannerspequenos.length>1" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannersmedios[1].banner_medium_id}}&type=M"/></div>
</div>
<div class="row" *ngIf="tiposOrganizacao.bannergrande!=undefined">
<div class="col col-100"><img *ngIf="tiposOrganizacao.bannergrande!=undefined" (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannergrande)" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannergrande.banner_large_id}}&type=M"
/></div>
</div>
<div class="row">
<div class="col col-33"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannerspequenos[0])" *ngIf="tiposOrganizacao.bannerspequenos.length>0" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannerspequenos[0].banner_small_id}}&type=M" /></div>
<div class="col col-33"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannerspequenos[1])" *ngIf="tiposOrganizacao.bannerspequenos.length>1" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannerspequenos[1].banner_small_id}}&type=M" /></div>
<div class="col col-33"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannerspequenos[2])" *ngIf="tiposOrganizacao.bannerspequenos.length>2" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannerspequenos[2].banner_small_id}}&type=M" /></div>
</div>
<div class="row">
<div class="col col-33"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannerspequenos[3])" *ngIf="tiposOrganizacao.bannerspequenos.length>3" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannerspequenos[3].banner_small_id}}&type=M" /></div>
<div class="col col-33"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannerspequenos[4])" *ngIf="tiposOrganizacao.bannerspequenos.length>4" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannerspequenos[4].banner_small_id}}&type=M" /></div>
<div class="col col-33"><img (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannerspequenos[5])" *ngIf="tiposOrganizacao.bannerspequenos.length>5" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannerspequenos[5].banner_small_id}}&type=M" /></div>
</div>
</div>
There’s no further CSS.
Thank you CSS experts for any help.
Huh? The black banner looks pretty non-square, rectangle to me. Or is this how it should look like? If so, can you provide a screenshot what it actually looks like?
The original image is 354 x 179 pixels. But It’s shown as a 354x354 picture.
I still don’t really understand how the picture can be 354 px high but only shown 179 px high in the image, but can’t you use Chrome dev tools to figure out where it gets the height you say it has? Or is it another elements that is square?
I’m sort of baffled about the structure in general. Is there a reason you’re not using ionic’s grid ?
I tried to use ion-grid firstly. But then I got the same result. This is how I expected the grid to get displayed.
This is how it’s getting displayed:
<ion-grid>
<ion-row class="row1">
<ion-col col-6><img width="177" height="179"></ion-col>
<ion-col col-6><img width="177" height="179"></ion-col>
</ion-row>
<ion-row class="row2">
<ion-col col-12><img width="354" height="179"></ion-col>
</ion-row>
<ion-row class="row3">
<ion-col col-4><img width="118" height="179"></ion-col>
<ion-col col-4><img width="118" height="179"></ion-col>
<ion-col col-4><img width="118" height="179"></ion-col>
</ion-row>
</ion-grid>
page-about {
ion-col {
text-align: center;
}
.row1 ion-col {
background: red;
}
.row2 ion-col {
background: black;
color: white;
}
.row3 ion-col {
background: cyan;
}
}
renders:
That’s cropped, but seems to be exactly what you are looking for.
1 Like
Thank you @rapropos I will give it a try. I will let you know if it works for me.
@rapropos I tried the way you showed me:
<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let bm of tiposOrganizacao.bannersmedios"><img (tap)="onBeforeSelectOrganizacao(bm)" src="{{servidores.enderecos.urlImagens+bm.banner_medium_id}}&type=M"/></ion-col>
</ion-row>
<ion-row *ngIf="tiposOrganizacao.bannergrande!=undefined">
<ion-col col-12><img *ngIf="tiposOrganizacao.bannergrande!=undefined" (tap)="onBeforeSelectOrganizacao(tiposOrganizacao.bannergrande)" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannergrande.banner_large_id}}&type=M"
/></ion-col>
</ion-row>
<ion-row >
<ion-col col-4 *ngFor="let bp of tiposOrganizacao.bannerspequenos"><img (tap)="onBeforeSelectOrganizacao(bp)" src="{{servidores.enderecos.urlImagens+tiposOrganizacao.bannerspequenos[0].banner_small_id}}&type=M" /></ion-col>
</ion-row>
</ion-grid>
But then that’s what I’ve got:
As you can see, again I have a gigantic padding above and under the black rectangular banner. Using ion-grid does not solve the padding issue.
Adonai
April 17, 2017, 11:56am
10
Can you share the image with us?, give us a link to the image or something to test locally?
Sure. Following are the images I am using:
Adonai
April 17, 2017, 12:40pm
12
It works perfect for me… but I see something in your last post (the one with the google chrome debuggin console)
So my believe is that the server you requested this images is transforming to square images with white background to both sides.
Try to load this images locally instead of load them from the server or put the src of the imagen in your browser to see if it is square too
1 Like
Ok @Adonai ! Thank you. I will do the way you said and then I will let you know.
Thank you so much @Adonai ! It works now. Just like you said: it was a problem with my java code on server.
2 Likes
Wow, what an obscure problem.
2 Likes
