適合一個特定尺寸的大圖像

我有一系列不同大小的圖像（稱爲它A），我正在安排彼此相鄰。按下按鈕後，這些圖像將被原始大小的更大圖像所取代。我想確保替換的圖片符合原始圖片尺寸。我試圖應用各種容器寬度技巧，但迄今爲止失敗了。適合一個特定尺寸的大圖像

我已經在這裏設置一個可運行的演示https://stackblitz.com/edit/ionic-au2pcv（代碼在home.html和網頁目錄home.ts）

如果按「切換」按鈕，圖像會被替換，一樣大小（我想避免）

（請原諒內嵌CSS樣式）

代碼：

我的模板

個

<ion-content padding> 
<div *ngFor="let image of images"> 
    <!-- the reason for this div is to force the placeholder image to this size --> 
    <!-- doesn't seem to work... --> 
    <div [ngStyle]="{'width':image.w, 'height':image.h, 'float':left}"> 
    <img [src]="showImage?image.src:placeholder" style="float:left;max-width:100%; max-height:100%;width:auto;height:auto;" /> 
    </div> 
</div> 

<div style="clear:both"> 
    <button ion-button (click)="toggleImage()">switch</button> 
</div> 
</ion-content>

的TS：

import { NgStyle } from '@angular/common'; 
images = [{ 
    src: 'http://lorempixel.com/300/200/', 
    w:300, 
    h:200, 
    }, 
    { 
    src: 'http://lorempixel.com/100/100/', 
    w:100, 
    h:100, 
    }, 
    { 
    src: 'http://lorempixel.com/200/80/', 
    w:200, 
    h:80, 
    }]; 

    placeholder = "http://via.placeholder.com/1000x1000"; 

    showImage:boolean = true; 

    toggleImage() { 
    this.showImage = !this.showImage; 
    }

來源

2017-10-08 user1361529

你能做到，你有什麼之前簡單的平局，你想請以後有什麼。要成爲你所尋找的人。 – Wandrille

您的圖像不會在您的演示中顯示 – Duannx

您的演示不顯示圖像。無論如何，爲了實現這一目標，你不必使用容器和其他所有東西。它可以通過使用簡單的CSS來實現。在執行此操作之前，請確保修復圖像的大小。例如，如果您希望1圖像大小爲30％，高度爲100％，然後將css的對象適合屬性設置爲覆蓋。下面是簡單的例子： -

.image{ 
 
    width:30%; 
 
    height:100%; 
 
    object-fit:cover; 
 
}

<img src="../image_path" class="image"/>

感謝

來源

2017-10-09 07:31:46

適合一個特定尺寸的大圖像

回答

相關問題