Question

我正在尝试为srcset实施新的<img>属性，并且我遇到了一些无法正常工作或我遗漏某些事情的边缘情况。< / p>

我使用了图片填充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 s中定义了填充？

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

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

vw方法忽略列的填充。 em或px方法忽略了列是流动的事实（我甚至不确定它们应该具有哪些值）。

有什么想法吗？

提前致谢。

Answer 1

Well Foundation不会那样工作，目前他们使用javascript data-interchange来处理新的attr 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)]"

使用Retina图像

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

自定义命名查询

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

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

在流体，填充，媒体查询的容器中使用srcset更正img的尺寸属性？

1 个答案: