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

Question

背景:

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

列表很简单 <ul> <li>具有 CSS 指定的设计属性。

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

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

这张图片将被缩放到 160x200

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

问题:

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

或者，换句话说。 img src 应该在什么时候在此上下文中确定属性？

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

1. 主模型/ View / Controller 上下文
2. 部分模型/ View / Controller 上下文
3. Javascript
4. 图像的 HTTP 处理程序

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

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

目前的逻辑基本都是view-logic。通过调用相关地点的部分列表。

(这是我们当前方法的提炼版本)

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

我相信您想根据浏览器的视口(viewport)提供适当大小的图像版本。

在理想世界中，这将是 HTML 元素的范围，Picture ，您可以在 View 或局部 View 中构建它:

<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/

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

您可能会在 View /局部 View 创建和刻录 <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 解决方案是您最好的选择，使用您的局部 View / View 来构建脚本可以正确使用的标记。 Scott Jehl 的这个是一个不错的选择:

https://github.com/scottjehl/picturefill

进一步阅读:http://css-tricks.com/which-responsive-images-solution-should-you-use/