設置圖像的標準尺寸

我會從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>

現在我保存一些樣品圖片我與可變大小的內部應用程序，上查看此我所有的圖像被拉伸，我的目標設備是平板電腦，我怎麼能在一個標準尺寸的顯示內大大小小的圖片卡片

來源

2017-06-22 Yokesh Varadhan

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

在檢查寬度>高度或其他方式後，使用javascript添加景觀/肖像類。

如果你希望它居中，位置將取決於圖像的大小。只需將左側和頂部動態設置爲圖像寬度/高度和容器寬度/高度的一半差異即可。或者將left/top設置爲50％，並添加一半的圖像寬度/高度的margin-left/margin-top。

或者您可以添加圖像作爲內聯樣式的背景，並設置背景大小以包含/覆蓋。

編輯：

.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}}))">

來源

2017-06-22 11:38:10 mikepa88

在平板電腦我得到的圖像拉伸，應用程序只能在prortarit模式 –

我的意思是圖像本身橫向/縱向，而不是應用程序。因此，橫向尺寸的圖像應該將其寬度調整爲100％，並讓高度自動適合以保持縱橫比，而對於縱向模式圖像則採用其他方式。 – mikepa88

這適用於定義寬度和高度的容器。如果高度沒有定義，給它一個絕對值而不是百分比。使用「vw」而不是「vh」，因爲您希望高度相對於列寬。 – mikepa88

設置圖像的標準尺寸

回答

相關問題