工具栏调整大小后图像大小不会更新

Question

我有一个mat-toolbar元素，大小为150px，切换到不同的组件后，我将其大小设置为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;

覆盖 替换的内容的大小可以在填充元素的整个内容框时保持其宽高比。如果对象的宽高比与其框的宽高比不匹配，则剪裁对象以使其适合。

填 替换的内容大小适合填充元素的内容框。整个物体将完全填满整个盒子。如果对象的宽高比与其框的宽高比不匹配，则对象将被拉伸以适合。

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

Answer 2

您必须使用object-fit: cover;，因此您的图像将自动调整大小

Answer 3

编辑：这是您使用的确切代码吗？因为这...

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

......会导致<div style="position: sticky;" style="height=70px;" color="primary">？

我认为你的html元素中只能有1个style属性

结束编辑

您已将最大宽度设置为70％，因此如果宽度已经达到70％，则更改框的高度不会改变任何内容，因为它将保持其比率。

尝试删除最大宽度，并在更改高度时查看它是否正确更新。

Answer 4

尝试添加位置：相对;对象适合：填充;在css中的风格

                          or

尝试使用ChangeDetectorRef pckg刷新工具栏（每当您更改工具栏的容器时）

import {ChangeDetectorRef} from '@angular/core';

constructor(private cd : ChangeDetectorRef){}

this.cd.detectChanges();