大きな画像を特定のサイズに合わせる

Question

私はお互いの隣に並んでいるサイズの異なる一連の画像をセットします（セット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; 
    } 

Answer 1

あなたのデモは、画像が表示されません。とにかく、これを達成するためには、コンテナや他のすべてのものを使う必要はありません。シンプルなCSSを使用することでそれを達成することができます。これを行う前に、必ずイメージのサイズを固定してください。たとえば、1画像のサイズを30％、高さを100％にして、cssのobject-fitプロパティをcoverに設定したいとします。以下は簡単な例である： -

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

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

おかげ