javascript - MVC 图像根据文件夹中的数量调整大小

Question

我最近开始使用 MVC 5，我已经坚持了一段时间 我想做的是根据文件夹中的图像数量调整图像大小 例如
如果一张图片的最大宽度为 100%
如果两个图像的最大宽度为 50%
如果三个图像的最大宽度为 33%
等等 但我也希望根据页面大小调整图像大小
我尝试过像

这样的样式

<div style="position: relative; max-width: 24%; background: White; vertical-align: top; display: inline-block; *display: inline; zoom: 1">
  <img style="margin: 10%; height: 80%; width: 80%;" src="~/Images/Example1.jpg" />
</div>

如果只使用了 4 张图像，这很好，但我想根据使用的图像数量重新调整大小 我也尝试过像

这样的foreach循环

@foreach (var imgPath in Directory.GetFiles(Server.MapPath("~/Images/ExampleFolder"), "*.jpg")) { var img = new FileInfo(imgPath);

<div style="position: relative; max-width: ; background: White; vertical-align: top; display: inline-block; *display: inline; zoom: 1">
  <img style="margin: 10%; height: 80%; width: 80%;" src="@Url.Content(String.Format(" ~/Images/ExampleFolder/{0} ", img.Name))" />
</div>


}

Answer 1

您可以尝试这样的操作(未测试):

@{
    var files = Directory.GetFiles(Server.MapPath("~/Images/ExampleFolder"), "*.jpg");
    if (files.Length > 0) 
    {
        double width = 100d / (double)files.Length;
        foreach (var imgPath in files)
        {
            var img = new FileInfo(imgPath);

            <div style="position: relative; background: White; vertical-align: top; display: inline-block; *display: inline; zoom: 1">
                <img style="margin: 10%; height: 80%; width: @(width)%;" src="@Url.Content(String.Format(" ~/Images/ExampleFolder/{0} ", img.Name))" />
            </div>


        }
    }
}