Question

我有一系列不同大小的图像（称之为A集），我正在彼此相邻排列。按下按钮后，这些图像将被原始尺寸的大得多的图像取代。我想确保替换的图像符合原始图像大小。我试图应用各种容器宽度技巧，但到目前为止都失败了。

我在这里设置了一个可运行的演示https://stackblitz.com/edit/ionic-au2pcv （代码位于页面目录中的home.html和home.ts）

如果按下＆＃34;开关＆＃34;按钮，图像被替换，大小（我想避免）

（请原谅内联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"/>

由于

将大图像拟合到特定大小

1 个答案: