Question

背景

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

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

我们现有的框架可以通过图片网址将图片动态缩放到合适的尺寸像这样

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

此图像将缩放至160x200

因为我们有可能不想让客户要求大于他们需要的图像。

问题：

图像尺寸选择逻辑的最正确位置是什么？

或者，换句话说。在这种背景下，img src属性应该在什么时候被确定？

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

主要模型/视图/控制器上下文
部分模型/视图/控制器上下文
Javascrit
图片的HTTP处理程序

我认为＃1或＃2可能最有意义。如果是这样，这个模型，视图或控制器逻辑？所有这些都有一些优势，但似乎都不合适

enter image description here

部分呈现产品列表可用于呈现所有类型的不同产品列表。从全屏图像滑块到小的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上。

每种方式都有很多优缺点，所以如果您想要更具体的答案，请尝试进一步缩小您的问题范围。

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

2 个答案: