Question

我将从我需要将其显示到HTML页面的URL中获取图像，每个图像都具有不同的大小我需要在卡片内显示这些图像，但所有图像都应以标准尺寸显示。

<ion-row>
    <ion-col col-12 col-xl-6 col-sm-12 col-md-6 [ngClass]="animateClass" *ngFor=" let item of animateItems; let i=index " (click)="openProduct(item)" >
        <img style=" height: 30vh; background-size:cover;  width: auto;  margin: auto;  display: block;"  src='assets/img/Products/{{item.id}}/{{item.img}}' />
        <p style="text-align: center;  font-size: 90%;  color: black;"> {{item.name}} </p> 
        <p style="text-align: center;"><b> item.price</b></p>
    </ion-col>
</ion-row>

现在我将一些样本图像存储在我的应用程序中，大小可变，在查看此图像时我的所有图像都被拉伸，我的目标设备是平板电脑，我怎样才能在卡内显示标准尺寸的小图像和大图像

Answer 1

.image_container>img{
    position: absolute;
}
.image_container>.portrait {
    height: 100%;
    width: auto;
    top: 0;
}
.image_container>.landscape{
    width: 100%; 
    height: auto; 
    left: 0;
}

在检查宽度＆gt;后，使用javascript添加landscape / portrait类。身高或其他方式。

如果您希望它居中，则位置将取决于图像的大小。只需动态设置左侧和顶部，即图像宽度/高度与容器宽度/高度之差的一半。或者将left / top设置为50％并添加一个margin-left / margin-top-minus图像宽度/高度的一半。

或者您可以将图像添加为带有内嵌样式的背景，并将背景大小设置为包含/覆盖。

编辑：

.image_container{
    height: 10vw;  background-position: center; background-size: contain; background-repeat: no-repeat;
}
<ion-col class="image_container" ... style="background-image: url(assets/img/Products/{{item.id}}/{{item.img}}))">

将图像设置为标准尺寸

1 个答案: