无论浏览器的宽度和高度如何，如何缩放 mudblazor 图像以完全适合浏览器窗口？

Question

我正在开发 Blazor 服务器应用程序。我正在使用 MudBlazor 组件 MudImage 来显示图像。我正在尝试根据浏览器窗口大小缩放浏览器中图像的大小。我努力了：

<MudImage Fluid="true" Src="@FileToDisplay" Alt="Mony the dog" Elevation="25" Class="rounded-lg" />

我不知道如何防止图像高度大于浏览器高度。当用户改变浏览器的大小时，图像的大小也会改变。如果用户增加浏览器的宽度，图像高度也会增加。图像宽度受浏览器宽度限制，但图像高度不受浏览器高度限制。有没有办法保持图像的长宽比，同时将图像大小限制为浏览器的宽度和高度？这意味着当浏览器宽度增加到足以使图像高度超过浏览器高度时，图像宽度需要停止增加。

如果 MudImage 没有可以处理此问题的属性，是否有其他方法（CSS 或 C#）来处理此问题？

Answer 1

如果您只想在页面中显示图像，可以使用视口高度和宽度 CSS 属性：

<MudImage class="myImage" Src="images/sweden.jpg" Elevation="25" />

<style>
    .myImage {
    max-width: 100vw; 
    height: auto;
    max-height:100vh;
    width:auto;
    }
</style>

请参阅： https ://try.mudblazor.com/snippet/mEwRklPfyNXOwSBq