html - 工具栏调整大小后图像大小未更新

Question

我有一个大小为 150px 的 mat-toolbar 元素，在切换到另一个组件后，我将其大小设置为 70px，如下所示:

<mat-toolbar style="position: sticky;" [style.height.px]="appWideService.toolbarHeight" color="primary">
<img/>
</mat-toolbar>
<router-outlet></router-outlet>

在不同的组件中:

ngOnInit() {
    this.appWideService.toolbarHeight = 70;
}

问题出在工具栏内的图像上。
当工具栏更改其大小时，它不会更新其大小。
CSS 如下:

img {
    height: 80%;
    width: auto;
    max-width: 70%;
    object-fit: cover;
}

它保持相同的大小。这是一个令人耳目一新的问题，因为当我更改浏览器的缩放比例时，它会突然更新图像大小。

我该怎么做才能解决这个问题？

Answer 1

这很简单。

你有

object-fit: cover;

改为使用

object-fit: fill;

覆盖
替换内容的大小保持其纵横比，同时填充元素的整个内容框。如果对象的纵横比与其框的纵横比不匹配，则对象将被裁剪为适合。

填充
替换内容的大小会填充元素的内容框。整个对象将完全填满框。如果对象的纵横比与其框的纵横比不匹配，则对象将被拉伸(stretch)以适合。

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit