适合一个特定尺寸的大图像

我有一系列不同大小的图像（称为它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

适合一个特定尺寸的大图像

回答

相关问题