如何用Razor动态创建行？附图片尺寸与calc() CSS设置问题

嘿，我来帮你搞定这两个棘手的问题！咱们一个个来拆解：

一、每5个对象创建新的行容器 #

方法1：使用.NET 6+的Chunk()方法（最简洁） #

如果你的项目基于.NET 6或更高版本，LINQ的Chunk()方法能直接帮你把模型数据按每5个一组拆分，代码清爽到不行：

@foreach (var itemGroup in Model.Chunk(5))
{
    <div class="row pics_in_a_row">
        @foreach (var item in itemGroup)
        {
            <div class="pic-item">
                <img src="@item.ImageUrl" alt="@item.AltText" />
            </div>
        }
    </div>
}

它会自动把模型分成每组最多5个对象，每组对应一个row pics_in_a_row容器，完美匹配你的需求。

方法2：兼容旧版本.NET（用索引判断） #

如果你的项目是.NET 5或更早版本，没法用Chunk()，那就通过循环索引来控制行的开启和闭合，注意别搞乱HTML结构：

@for (int i = 0; i < Model.Count; i++)
{
    // 每第1、6、11...个对象时，开启新行
    if (i % 5 == 0)
    {
        // 不是第一个行的话，先闭合上一个行
        if (i != 0)
        {
            </div>
        }
        <div class="row pics_in_a_row">
    }

    // 渲染单个图片项
    <div class="pic-item">
        <img src="@Model[i].ImageUrl" alt="@Model[i].AltText" />
    </div>

    // 循环结束时，记得闭合最后一个行
    if (i == Model.Count - 1)
    {
        </div>
    }
}

通过i % 5 == 0判断新建行的时机，同时处理好标签的开闭，避免出现无效HTML。

二、获取图片宽高并应用到calc() CSS #

这里分两种场景，你可以根据图片的存储位置选择：

场景1：服务器端读取本地图片（推荐，更稳定） #

如果图片存在服务器本地，用ImageSharp（比System.Drawing更跨平台）读取宽高是最优解：

1. 先安装ImageSharp NuGet包：

Install-Package SixLabors.ImageSharp

2. 在Razor视图中读取并计算：

@using SixLabors.ImageSharp
@using SixLabors.ImageSharp.Processing

@foreach (var itemGroup in Model.Chunk(5))
{
    <div class="row pics_in_a_row">
        @foreach (var item in itemGroup)
        {
            // 拼接本地图片路径（根据你的实际存储路径调整）
            var imagePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", item.ImageUrl.TrimStart('/'));
            
            // 读取图片宽高
            using var image = Image.Load(imagePath);
            int imgWidth = image.Width;
            int imgHeight = image.Height;

            // 用calc设置容器高度，保证图片比例不变
            <div class="pic-item" style="width: calc(100% / 5 - 8px); height: calc((@imgHeight / @imgWidth) * 100%);">
                <img src="@item.ImageUrl" alt="@item.AltText" style="width: 100%; height: 100%; object-fit: cover;" />
            </div>
        }
    </div>
}

这里计算了图片的宽高比，用calc()把比例转换成容器高度，避免图片拉伸变形。

场景2：客户端读取图片宽高（适合远程图片） #

如果图片是远程链接，服务器端读取太麻烦，就用JavaScript在客户端获取真实宽高：

@foreach (var itemGroup in Model.Chunk(5))
{
    <div class="row pics_in_a_row">
        @foreach (var item in itemGroup)
        {
            <div class="pic-item">
                <img src="@item.ImageUrl" alt="@item.AltText" onload="setImageSize(this)" />
            </div>
        }
    </div>
}

<script>
function setImageSize(imgElement) {
    const width = imgElement.naturalWidth;
    const height = imgElement.naturalHeight;
    const parentDiv = imgElement.parentElement;
    
    // 动态应用calc样式
    parentDiv.style.width = "calc(100% / 5 - 8px)";
    parentDiv.style.height = `calc(((${height} / ${width}) * 100%)`;
}
</script>

图片加载完成后，通过naturalWidth和naturalHeight拿到真实尺寸，再给父容器设置动态样式。

内容的提问来源于stack exchange，提问作者Daniel Björk