画像を標準サイズに設定する

Question

URLから画像を取得するHTMLページに表示する必要があります。画像はすべてサイズが異なります。カード内に表示する必要がありますが、すべての画像は標準サイズで表示する必要があります。今、私は可変サイズで私のアプリ内のいくつかのサンプル画像を保存し、すべての私のイメージが引き伸ばされ、これを見た上で、私のターゲットデバイスは、内部の私は、標準的なサイズが小さく、大きな画像を表示することができるか、錠剤であるために

<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> 

カード

Answer 1

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

width> heightまたはそれ以外の方法を確認した後、javascriptでlandscape/portraitクラスを追加します。

画像を中央に配置する場合は、位置は画像のサイズによって異なります。画像の幅/高さとコンテナの幅/高さの差の半分まで、左と上を動的に設定するだけです。または、左/上を50％に設定し、画像の幅/高さのマイナス半分の余白 - 左/余白 - 頂点を追加します。

または、イメージをインラインスタイルの背景として追加し、background-sizeを/ 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}}))">