如何使MudBlazor的MudImage完全适配浏览器窗口并保持宽高比？

方法一：纯CSS实现（推荐） #

MudImage的Fluid="true"仅控制宽度自适应容器，但未限制高度。通过自定义CSS类可以让图片同时受限于浏览器视口的宽高，且保持原始比例：

1. 修改MudImage组件，添加自定义类：

<MudImage Src="@FileToDisplay" Alt="Mony the dog" Elevation="25" Class="rounded-lg viewport-fit-image" />

2. 在全局样式文件（如wwwroot/css/site.css）中添加以下样式：

.viewport-fit-image {
    max-width: 100vw;   /* 最大宽度不超过视口宽度 */
    max-height: 100vh;  /* 最大高度不超过视口高度 */
    width: auto;        /* 宽度自动计算以保持比例 */
    height: auto;       /* 高度自动计算以保持比例 */
    display: block;
    margin: 0 auto;     /* 可选：让图片在视口中居中 */
}

原理：max-width和max-height限制图片的最大尺寸，width: auto和height: auto让浏览器根据原始宽高比自动缩放，确保图片始终完整显示在视口内，不会超出宽高限制。

方法二：结合C#与JSInterop精确控制 #

如果需要更精细的尺寸控制（比如扣除页面其他元素的高度），可以通过监听窗口尺寸变化，计算图片的最优尺寸：

1. 组件内C#逻辑 #

@inject IJSRuntime JSRuntime
@implements IDisposable

<MudImage Src="@FileToDisplay" Alt="Mony the dog" Elevation="25" Class="rounded-lg" 
          Width="@ImageWidth" Height="@ImageHeight" />

@code {
    private int? ImageWidth { get; set; }
    private int? ImageHeight { get; set; }
    private double _aspectRatio = 1.0;
    private DotNetObjectReference<YourComponentName>? _dotNetRef;

    protected override async Task OnInitializedAsync()
    {
        _dotNetRef = DotNetObjectReference.Create(this);
        // 获取图片原始宽高，计算比例
        var imgInfo = await JSRuntime.InvokeAsync<ImageSize>("getImageSize", FileToDisplay);
        _aspectRatio = (double)imgInfo.Width / imgInfo.Height;
        await UpdateImageDimensions();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 监听窗口 resize 事件
            await JSRuntime.InvokeVoidAsync("registerResizeListener", _dotNetRef);
        }
    }

    [JSInvokable]
    public async Task OnWindowResized()
    {
        await UpdateImageDimensions();
    }

    private async Task UpdateImageDimensions()
    {
        var viewport = await JSRuntime.InvokeAsync<ViewportSize>("getViewportSize");
        // 计算不超出视口的最大尺寸
        var calcWidth = viewport.Width;
        var calcHeight = calcWidth / _aspectRatio;

        // 如果高度超出视口，改用高度为基准计算宽度
        if (calcHeight > viewport.Height)
        {
            calcHeight = viewport.Height;
            calcWidth = calcHeight * _aspectRatio;
        }

        ImageWidth = (int)Math.Floor(calcWidth);
        ImageHeight = (int)Math.Floor(calcHeight);
        StateHasChanged();
    }

    public void Dispose()
    {
        _dotNetRef?.Dispose();
        JSRuntime.InvokeVoidAsync("removeResizeListener");
    }

    // 用于接收JS返回的尺寸类
    public class ImageSize { public int Width { get; set; } public int Height { get; set; } }
    public class ViewportSize { public int Width { get; set; } public int Height { get; set; } }
}

2. 在wwwroot/js/site.js中添加JS方法 #

let resizeTimeout;

function getImageSize(src) {
    return new Promise(resolve => {
        const img = new Image();
        img.onload = () => resolve({ width: img.width, height: img.height });
        img.src = src;
    });
}

function getViewportSize() {
    return { width: window.innerWidth, height: window.innerHeight };
}

function registerResizeListener(dotNetRef) {
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            dotNetRef.invokeMethodAsync('OnWindowResized');
        }, 100); // 防抖，避免频繁触发
    });
}

function removeResizeListener() {
    window.removeEventListener('resize');
    clearTimeout(resizeTimeout);
}

这种方法会动态计算图片的最优尺寸，适合需要排除页面导航栏、footer等元素占用空间的场景。

内容的提问来源于stack exchange，提问作者Hamilton Woods