0

I will get images from a URL I need to show it to HTML page, every images is of different size I need ti display this inside a card but all images should be displayed in a standard size.

<ion-row>
    <ion-col col-12 col-xl-6 col-sm-12 col-md-6 [ngClass]="animateClass" *ngFor=" let item of animateItems; let i=index " (click)="openProduct(item)" >
        <img style=" height: 30vh; background-size:cover;  width: auto;  margin: auto;  display: block;"  src='assets/img/Products/{{item.id}}/{{item.img}}' />
        <p style="text-align: center;  font-size: 90%;  color: black;"> {{item.name}} </p> 
        <p style="text-align: center;"><b> item.price</b></p>
    </ion-col>
</ion-row>

For now I stored some sample image inside my app with variable size, on viewing this all my images are stretched, my target device is a tablet, how could I show small and big images in a standard size inside the card

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Yokesh Varadhan
  • 1,636
  • 4
  • 21
  • 47

1 Answers1

1
.image_container>img{
    position: absolute;
}
.image_container>.portrait {
    height: 100%;
    width: auto;
    top: 0;
}
.image_container>.landscape{
    width: 100%; 
    height: auto; 
    left: 0;
}

Add the landscape/portrait class with javascript after checking if width > height or the other way around.

If you want it centered, the position will depend on the size of the image. Just set left and top dynamically to half the difference of the image width/height and the container width/height. Or set left/top to 50% and add a margin-left/margin-top of minus half the image width/height.

Or you could add the image as a background with inline style and set background-size to contain/cover.

EDIT:

.image_container{
    height: 10vw;  background-position: center; background-size: contain; background-repeat: no-repeat;
}
<ion-col class="image_container" ... style="background-image: url(assets/img/Products/{{item.id}}/{{item.img}}))">
mikepa88
  • 733
  • 1
  • 6
  • 20
  • in tablet i am getting images stretched, the app works only in prortarit mode – Yokesh Varadhan Jun 23 '17 at 08:49
  • I mean landscape/portrait for the images themselves, not the app. So a landscape sized image should fit its width to 100% and let the height to automatically fit to keep the aspect ratio, and the other way around for portrait mode images. – mikepa88 Jun 23 '17 at 09:10
  • This works for a container with defined width and height. If the height is not definded, give it an absolute value instead of a percentage. Use "vw" instead of "vh" because you would want the height to be relative to the column width. – mikepa88 Jun 23 '17 at 09:17
  • WARNING: sanitizing unsafe style value background-image: url(assets/img/Products/5/1.jpeg) (see http://g.co/ng/security#xss). getting this error – Yokesh Varadhan Jun 23 '17 at 09:58
  • you can use DomSanitizer.bypassSecurityTrustStyle , look into this: https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 – mikepa88 Jun 23 '17 at 10:10