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

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

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

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

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

结束编辑

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

尝试删除max-width并查看更改高度时是否正确更新。

Answer 3

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

Answer 4

尝试使用object-fit：fill添加 position：realtive; ; css中的风格

or

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

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

constructor(private cd : ChangeDetectorRef){}

this.cd.detectChanges();

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

4 个答案: