将大图像适合特定尺寸答案

【问题标题】：Fitting a large image to a specific size将大图像适合特定尺寸
【发布时间】：2017-10-09 15:31:46
【问题描述】：

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

我在这里设置了一个可运行的演示 https://stackblitz.com/edit/ionic-au2pcv（代码在 pages 目录中的 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;
  }

【问题讨论】：

请您简单地画出您之前拥有的东西和之后想要的东西。了解您正在寻找的东西。
你的图片没有显示在你的演示中

标签： css html angular ionic-framework ionic3

【解决方案1】：

您的演示不显示图像。无论如何，要实现这一点，您不必使用容器和所有其他东西。它可以通过使用简单的 css 来实现。在执行此操作之前，请确保修复图像的大小。例如，如果您希望 1 图像大小为 30%，高度为 100%，然后将 css 的 object-fit 属性设置为覆盖。下面是一个简单的例子：-

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

&lt;img src="../image_path" class="image"/&gt;

谢谢

【讨论】：