MVC中图像大小逻辑的正确位置是什么

Question

背景：

在我们的网上商店应用程序中，我们有许多部分视图来制作各种产品列表。 在一项重大的重构工作中，我们希望摆脱大部分，可能除了其中一个之外的所有部分，以避免所有重复的代码。

列表是一个简单的<ul> <li>，其设计属性应由 CSS 指定。

我们有现有的框架，可以通过图像 url 将图像动态缩放到适当的大小 像这样

http://images.shop.com/data/product/160x200/5155-5ca8e.jpg

此图像将缩放为 160x200

由于我们有可能不想让客户请求比他们需要的更大的图像。

问题：

图片尺寸选择逻辑最正确的地方是什么？

或者，换一种说法。在这种情况下应该在什么时候确定img src 属性？

这种逻辑有很多潜在的地方

1. 主模型/视图/控制器上下文
2. 部分模型/视图/控制器上下文
3. Javascrit
4. 图像的 HTTP 处理程序

我认为#1 或#2 可能最有意义。 如果是这样，这是模型、视图还是控制器逻辑？ 它们都有某种优势，但似乎都不合适

渲染产品列表的部分可用于渲染各种不同的产品列表。从全屏图像滑块到 10x10 像素的小缩略图。 而且我们不想强迫缩略图请求全屏图像，只是为了容纳可能最大的列表。

当前的逻辑基本上是视图逻辑。通过调用相关地点的部分列表。

（这是我们当前方法的提炼版本）

Landingpage.cshtml

<ul>
Html.RenderAction("ListRandom", "Product", new { Category = feed.catId});
</ul>

ProductController.cs

    public PartialViewResult ListRandom(int? CategoryId)
    {
        var model = new ProductListModel { ProductsRandomGet(CategoryId) };
        return PartialView("_ProductList", model);
    }

_ProductList.cshtml

<li>
      <a href="@item.href">
          <img alt="@item.Name" 
               src="data/product/35x44/@item.Image" />  /* Image Size */ 
          <div class="listItemInfo">
               @item.Name    
               @item.Price                    
          </div>
      </a>
</li>

虽然这可行，但它会导致所有不同类型的产品列表出现大量重复的 html。不同列表的html几乎相同，所有不同之处都可以放在CSS中。

但不是图像 src 属性

Answer 1

我相信您希望根据浏览器的视口提供适当大小的图像版本。

在创意世界中，这将是 HTML 元素的权限，Picture，您可以在视图或部分视图中构建它：

<picture width="500" height="500">
   <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <img src="small-1.jpg" alt="">
   <p>Accessible text</p>
</picture>

参考：http://www.w3.org/TR/html-picture-element/

不幸的是，我们距离任何有意义的支持还有很长的路要走。

您可能会在创建视图/部分视图时变得棘手，并在带有媒体查询的 <style> 标记中刻录，但这只有在您的设计允许您将图像作为背景图像添加到元素时才会有所帮助：

@media only screen and (min-width: 700px) {
   div{background-image: url(700px-img.png);
}

@media only screen and (min-width: 90px) {
   div{background-image: url(900px-img.png);
}

但是，应用这样的背景图像会带来其他问题。

目前，我认为 javacsript 解决方案是您最好的选择，使用您的部分视图/视图来构建脚本可以正确使用的标记。 Scott Jehl 的这个是一个不错的选择：

https://github.com/scottjehl/picturefill

延伸阅读：http://css-tricks.com/which-responsive-images-solution-should-you-use/

Answer 2

我认为控制器不合适，因为控制器不执行显示逻辑。这是视图的责任。从您的问题中，我仍然不清楚当前决定包含哪个图像尺寸，图像尺寸来自哪里（您是否使用少数固定尺寸，或者它们可以每个图像有所不同？）或有多少场景是。

例如，您可以使用局部视图来仅显示图像，例如 ProductImageSmall（比 ProductImageShoppingCart 更可重用但不太具体）：

<img src="data/product/35x44/@item.Image" [...] /> 

然后在父视图中，您可以决定使用哪个部分来呈现项目集合。

您还可以在模型中包含分辨率：

<img src="data/product/@(item.ImageWidth)x@(item.ImageHeight)/@item.Image" [...] /> 

或者将这些尺寸粘贴在 ViewBag 中。

每种方式都有太多的利弊，所以如果你想要更具体的答案，请尝试进一步缩小你的问题范围。