如何在父块div中拟合图像

Question

有一个带有图像和包装器的代码：

<div #container id="container" [style.transform]="transform$ | async">
<img
#image
class="image"
/>

我试过这个：

#container{
height: 500px
}
img {
height: 100%;
width: 100%;

}

但图像失真

Answer 1

我认为问题在于您将width和height都设置为100%。然后图像看起来会失真。

您必须设置：

• 仅width: 100%;或
• 仅CCD_ 4

如果仅将其中一个设置为100%，则图像将按比例变小/变大，并且不会失真。

但也有不利的一面。这意味着图像不会填充容器。