标签: srcset

我正在阅读 HTML5 中的响应式图像并有一个问题。

什么时候会使用 x 描述符？例如，如果您有同一图像的不同分辨率版本，为什么您不使用 w 描述符呢？据我了解，如果你定义：

<img src="fallback.img" alt"txt"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg  320w,"
     sizes="250px"   
     alt="txt">

然后，浏览器通过将图像的宽度（1024,640,320）（由 w 描述符提供）除以它们将要显示的宽度（250）（由尺寸属性提供）来计算出像素密度。通过获取像素密度，浏览器可以考虑高密度显示。

到目前为止，这就是我的理解，如果我错了，我很想知道。那么什么时候 w 描述符不是最佳选择/什么时候 x 描述符更可取？

我开始在我的 Webpack 应用程序中使用该标签，并注意到当前设置不适用于 srcset 中引用的图像：

<picture>
<source srcset="img/goal-2.jpg" media="(min-width: 675px)">
<img src="../img/goal-2-s.jpg">
</picture>

目标 2-s.jpg 被正确解析并复制到我的构建文件夹，而目标 2.jpg 被忽略。

目前我的 webpack.config.js 配置是这样的：

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loader: 'file?name=img/[name].[ext]'
},...

我不想自动生成不同大小的文件——我加载的文件的裁剪方式不同，我手动完成并将其保存在我的应用程序文件夹中。我想要的只是 Webpack 以与处理 img 的 src 图像相同的方式处理我的源的 srcset 图像。

谢谢！

我想提供响应式图像，为此我使用 srcset 属性。

<img 
    src="https://res.cloudinary.com/demo/image/upload/w_480/group.jpg" 
    alt=""
    srcset="
        https://res.cloudinary.com/demo/image/upload/w_480/group.jpg 480w,
        https://res.cloudinary.com/demo/image/upload/w_750/group.jpg 750w,
        https://res.cloudinary.com/demo/image/upload/w_1334/group.jpg 1334w,
        https://res.cloudinary.com/demo/image/upload/w_1536/group.jpg 1536w,
        https://res.cloudinary.com/demo/image/upload/w_2048/group.jpg 2048w
    "
>

Chrome 和 android 按预期工作；在纵向移动中，它将加载一个“小”图像，只是填充宽度所需的图像，如果您转动手机，它将根据新宽度请求新图像。

在 Chrome 检查器工具中选择 iOS 设备（iPhone 6、iPad）效果很好：

但是 Safari 桌面版和移动版都不会在调整大小/转动设备上请求新图像。但它确实在重新加载时请求正确的图像。

我尝试过 Safari 9.1.2 和 11.0、iPhone 6 (iOS 10.3.2)、iPhone 6s (iOS 11.0) 和 iPad Air 2 (iOS 11.0)。

Safari 是否仍然缺乏对 srcset 的支持？它被认为是完全支持的。

在codepen测试自己。 也在 codepen 上写代码。

我正在我的页面上进行优化,这一切都很顺利,因为我想出了一个实现srcset和sizes属性的想法<img>.我使用新的缩放图像(额外的1200w,大型992w,中型786w,小型576w,extra_small-320w)创建php构造img对象和填充srcset属性的函数和通用(尽可能多的可用)sizes属性(下面的示例) .当开始使用杂发生启动问题引导网格系统对于不同的vw(视图宽度),例如col-lg-4 col-md-6.我尝试了很多不同的版本,sizes但它似乎没有工作,除了一个:

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"

这是有效的,但对于一个网格 - 在这个例子.333中是col-4.(12em是sidenav宽度).

但是对于多个网格,我尝试了这个:

sizes="(max-width: 575.98px) 100vw,
        ((min-width: 576px) and (max-width: 767.98px)) 100vw,
        ((min-width: 768px) and (max-width: 991.98px)) calc(.5 * 100vw),
        ((min-width: 992px) and (max-width: 1199.98px)) calc(.333 * 100vw),
        ((min-width: 1200px) and (max-width: 1440.98px)) calc(.333 * 100vw),
        (min-width: 1441px) calc(.333 * …

属性如何srcset结合属性确定正确的图像sizes？以此图为例：

<img alt="Demo image"
     sizes="(min-width: 1024px) 512px,
             100vw"
     srcset="img/banner-large.jpg 2048w,
             img/banner-medium.jpg 1400w,
             img/banner-small.jpg 800w">

（我清除了Chrome中的缓存）

我认为最后一个图像总是会被选择（800w），因为 512px（尺寸）和图像宽度为 800w（srcset），但该图像并不总是被选择？为什么？

我很长一段时间都使用图片元素来制作每个视口不同尺寸的响应式图像。它工作得很好，但现在我被迫切换到响应式，并且<img>我尝试将我的图片元素重写为 IMG 样式。srcsetsizes

经过长时间的搜索，我在以下位置找到了很好的文档：

https://www.dofactory.com/html/img/sizes 以及更多详细信息： https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

带图片的代码是这样的：

<picture>
    <source media="(max-width: 740px)" src="740.jpg" type="image/jpeg">
    <source media="(max-width: 980px)" src="1280.jpg" type="image/jpeg">
    <source media="(max-width: 1280px)" src="1600.jpg" type="image/jpeg">
    <source media="(max-width: 1480px)" src="1920.jpg" type="image/jpeg">
    <img src="740.jpg" title="..." alt="..." />
</picture>  

我将其重写为响应式 img，如下所示：

<img src="740.jpg" title="..." alt="..." 
    srcset="
       740.jpg 740w,
       1280.jpg 1280w,
       1600.jpg 1600w,
       1920.jpg 1920w" 
    sizes="
       (max-width: 740px) 740px,
       (max-width: 980px) 1280px,
       (max-width: 1280px) 1600px,
       (max-width: 1480px) 1920px"
/>

这在浏览器中的第一次测试中似乎效果很好。但后来我注意到在移动设备上它加载了太大的图像。

原因是某些移动设备的像素密度不同，如 响应图像完整指南中所述

您也可以使用 Firefox 的开发工具来模拟：

我尝试通过将代码更改为来解决此问题

<img src="1920.jpg" title="..." alt="..." 
    srcset=" …