Within my mat-toolbar element, I initially set the size to 150px. However, upon transitioning to a different component, I adjust the size to 70px using the following code snippet:
<mat-toolbar style="position: sticky;" [style.height.px]="appWideService.toolbarHeight" color="primary">
<img/>
</mat-toolbar>
<router-outlet></router-outlet>
Within the different component:
ngOnInit() {
this.appWideService.toolbarHeight = 70;
}
The issue arises with the image within the toolbar not updating its size when the toolbar size changes. The CSS styling for the image is as follows:
img {
height: 80%;
width: auto;
max-width: 70%;
object-fit: cover;
}
The image remains the same size, and seems to be a refreshing problem as adjusting the browser zoom triggers the image size update. What steps can I take to resolve this?