html - 在流动的、填充的、媒体查询的容器中使用 srcset 更正 img 的大小属性？

Question

我正在尝试实现新的 srcset <img> 的属性我遇到了一些无法正常工作的边缘情况，或者我遗漏了一些东西。

我正在使用 picturefill 2.1.0 polyfill，并且我已经阅读了一些文章，例如 http://ericportis.com/posts/2014/srcset-sizes/或 https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content .

我得到了非常简单的例子的想法，例如:

<img
    src="small.jpg"
    srcset="
        small.jpg  100w,
        medium.jpg 200w,
        large.jpg  300w
    "
    sizes="100vw"
>

浏览器根据屏幕尺寸、像素密度、缩放比例和其他因素加载 small.jpg、medium.jpg 或 large.jpg。它可以为 200px 简单屏幕或 100px hdpi(2x) 显示加载 medium.jpg。到目前为止一切顺利。

问题依赖于sizes属性。在前面的示例中，我们告诉浏览器图片占据了整个 (100%) 视点宽度 (vw)。

我正在使用的项目使用 Foundation，它具有流畅、em-padded 网格，这些网格可能具有基于屏幕尺寸(媒体查询)的或多或少的列.

例如，我们想要一个网格，其中小屏幕有 2 列，中屏幕 (min-width: 40em) 有 4 列。每列包含一个图像。什么是正确的 sizes请记住，每一列都是宽度可变的，并且有一个在 em 中定义的填充。是吗？

<ul class="small-block-grid-2 medium-block-grid-4">
    <li>
        <img
            src="small.jpg"
            srcset="
                small.jpg  160w,
                medium.jpg 320w,
                large.jpg  480w
            "
        >
    </li>
</ul>

1. sizes="(min-width: 40em) 25vw, 50vw"
2. sizes="(min-width: 40em) ???em, ???em"
3. sizes="(min-width: 40em) ???px, ???px"

vw方法忽略了列的填充。 em或 px方法忽略了列是可变的这一事实(我什至不确定它们应该具有哪些值)。

有什么想法吗？

提前致谢。

Answer 1

Well Foundation 不是那样工作的，目前他们使用 javascript data-interchange处理新属性srcset :

<img 
     data-interchange="[/path/to/default.jpg, (default)], 
     [/path/to/small.jpg, (small)], 
     [/path/to/retina.jpg, (retina)], 
     [/path/to/medium.jpg, (medium)], 
     [/path/to/bigger-image.jpg, (large)]"
>

<!-- or your own queries -->
<img 
     data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], 
     [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]"
>

使用图像交换

data-interchange="[image_path, (media query)], [image_path, (media query)]"

使用视网膜图像

data-interchange="[image/path/to/retina.jpg, (retina)]"

自定义命名查询

$(document).foundation('interchange', {
  named_queries : {
    my_custom_query : 'only screen and (max-width: 200px)'
  }
});

在您的情况下，您可以创建新的自定义命名查询并将其传递给您的 Img。