标签: responsive-images

我正在阅读 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 描述符更可取？

我试着按照这个答案中的建议,如本CodePen所示,但需要弯曲的图像仍然保持其原始尺寸,除非屏幕很窄,它就在行上.

在类似的情况下,真实页面中还有另一组div - 如果侧面div会缩小,它将有助于页面在更大的宽度范围内工作.

它包含的div包含flex: auto;在它上面,img {width: 90%; height: auto;}对于其中的任何图像,该div的父级都有style="flex: 0 1 250px;"它.

这是它的CodePen.

我想有一个简单的错误,如果不是,我想我会将图像作为当前div的背景,然后设置background-size: 100% auto;它.

section {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 3vw;
  margin-left: 6vw;
}
.outerDiv {
  background-color: rgba(50, 50, 0, 0.5);
}
.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px;
}
.innerDiv p {
  padding: 6px 18px 0 15px;
}
.imgResize { …

我想提供响应式图像，为此我使用 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 上写代码。

我的目标是提供同一图像的不同版本（分辨率/尺寸），这些版本应占据视口宽度的 100%，因此我可以为移动设备（或者通常是显示屏较小或速度较慢的设备）提供 800px 版本连接）、1366px 及以上到更大的桌面显示器。

问题是我正在使用 Chromium 设备模拟器进行测试，一些小屏幕设备加载 1366px 版本而不是 800px：iPhone 6/7/8（375px 宽度）加载 800px 图像，但 iPad（768px） 、Nexus 5 (360px) 和 iPhoneX (375px) 都加载 1366px，而不是加载 800px。

我不太有信心正确理解尺寸指令，这是我的代码，默认 src 引用 2880px 版本只是为了帮助测试：

<img class="img-fluid" 
    srcset="img/dreamstime_800w_109635242.jpg 800w,
         img/dreamstime_1366w_109635242.jpg 1366w,
         img/dreamstime_2880w_109635242.jpg 2880w"
    sizes="(max-width: 800px) 100vw,
        (max-width: 1366px) 100vw,                      
        2880px 100vw"
    src="img/dreamstime_2880w_109635242.jpg"/>

假设我有以下图像：

<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w">

看来sizes我没有包含的属性默认为100vw，因此小图像被放大到视口的宽度。

如果我不想要这种行为，而是希望图像默认为其固有大小，我该怎么办？

我预计该图像在普通显示器上的宽度默认为 100px，在 2x（视网膜）显示器上的宽度默认为 50px。

如果我指定我自己的sizes属性100px，这并不能解决50px在视网膜显示屏上显示它的问题。

我需要这种行为的原因是因为在我的系统中，允许用户上传任何大小的图像并将其放置在页面上，并且我正在生成一个srcset具有多个步骤的图像，直到其图像的最大大小，并且我需要一种方法给定图像的大小和用户屏幕的像素密度，以正确的宽度显示图像。

自动宽度图像的这种行为可以使用 来实现吗srcset？

在我的研究中，我发现这篇文章直接解决了这个问题。作者建议添加width具有图像最大尺寸的属性，以恢复该sizes属性对图像固有尺寸的作用。然而，他没有说明如何在不同的像素密度下实现这一点。

因此，我再次发现自己将头发拉到响应图像上。CMS给了我它srcset，我建立了一个简单sizes属性，我currentSrc通过将鼠标悬停在开发工具中的属性上来检查 -错误的Src！转到10，可能更改媒体条件，然后保存，重新加载，悬停，重复，直到可以正常工作为止。希望它不会因其他图像而失败。

必须有更好的方法来做到这一点？考虑到Firefox在调试Webfonts方面仍然比Chrom *更好，并且直到今天我才在Chrome的开发工具中找到“ 添加设备像素比率”，我想知道我是否忽略了某些内容。我知道并曾经使用过占位符图像，但是设置它们可能很麻烦，而且无法告诉我

• 是sizes属性语法正确的？
• 浏览器将图像视为当前视口中有多少个设备像素？那是多少个“ srcset w-pixels”？
• 最重要的是：哪种媒体条件与当前视口匹配？为什么？

编辑：想出了这个例子，希望对您有所帮助：

<img
  src="foo.jpg"
  sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
  srcset="foo_a.jpg 300w, foo_b.jpg 768w" />

视口为650px，设备像素比率为
1。DevTools告诉我：

currentSrc == "foo_b.jpg"

为什么？这是什么条件 是什么33vw最终成为？650px*33/100？它有什么关系300w？距离最近768w吗？
请注意，我并不是真正在问这些特定的值，而是一般的工作流程。

EDIT2：在这种情况下，我可能会要求开发工具功能（或扩展）告诉我：

1. 视口650px
2. 火柴 ((min-width: 600px) and (max-width: 1000px))
3. 650px @ DPR 1.0 = 650w
4. => 33vw = 650w * …

在尝试实现全出血背景图像时，我认为我发现了结合使用响应式img srcset/sizes属性和 CSS 的问题object-fit: cover;。

给出以下简单的测试用例：

<img class="background"\n     srcset="//placehold.it/320x180 320w,\n             //placehold.it/640x360 640w,\n             //placehold.it/960x540 960w,\n             //placehold.it/1280x720 1280w,\n             //placehold.it/2560x1440 2560w"\n     src="//placehold.it/320x180"\n     sizes="100vw">\n

.background {\n  position: absolute;\n  display: block;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n

（这里是JSFiddle；这里是孤立的结果页面）

如果视口的大小类似于纵向智能手机（例如，320\xc3\x97568），则浏览器必须垂直放大图像以实现“覆盖”。这会将图像在水平维度上扩展到视口之外（至少在禁用缓存的 Chrome 中\xe2\x80\xa0），因为sizes=\'100vw\'（当省略它时，100vw默认情况下）浏览器仍然选择最合适的源视口宽度为 320px，产生像素化图像：

我想我理解浏览器为什么要这样做（图像元素本身仍然是 320px 宽，无论图像的可见大小如何），但对于我的用例来说，这是一个无赖。

我能想到的唯一解决方法是“重载”该sizes属性以强制选择更高分辨率的源。因为我的示例图像是 16:9，所以我可以使用简单的计算加上orientation媒体查询来帮助浏览器了解情况，并使用动态单位告诉它所需的宽度：

<img class="background"\n …

更新：

我刚刚找到了一些更多信息。看来在 Chrome 中，图像的 currentSrc 通常是空的，而在 Firefox 中，URL 总是正确的。JS 是否在 currentSrc 可用之前尝试访问它？有办法防止这种情况吗？

我正在创建一个 Drupal 8 网站，为了将响应式图像模块与背景图像一起使用，我想出了以下解决方法。下面的 JS 函数 setParallaxImage() 从图片元素中的 img 中获取 currentSrc，并将其设置为最外层 div 的背景图像。img 本身不显示（CSS 中的 display: none），并给出一个虚拟图像，因为我只需要它来获取 currentSrc。该函数通过 onload 和 onresize 调用。

该代码似乎在 Firefox 中运行良好。当调整浏览器大小超过断点时，图像会瞬间变成灰色，然后从正确的源加载图像。然而，对于 Chrome，当快速调整大小超过断点时，图像可能会变成灰色并且根本不显示，即，background-image: url()。通常，如果我再调整窗口大小几次，图像最终就会出现。有谁知道为什么会发生这种情况？感谢您的阅读。

JS

function setParallaxImage() {


    const parallaxContainer = document.getElementsByClassName('paragraph--type--parallax-banner-with-text');

    for(var i = 0; i < parallaxContainer.length; i++) {
      console.log('in setparallax');
      var x = parallaxContainer[i];
      var parallax = x.getElementsByClassName('field--name-field-parallax-image-top-')[0];
      var picture = parallax.getElementsByTagName("picture")[0];
      var sourceURL = picture.querySelector('img').currentSrc;
      x.setAttribute('style', 'background-image: url(' + sourceURL +')'); …

我很长一段时间都使用图片元素来制作每个视口不同尺寸的响应式图像。它工作得很好，但现在我被迫切换到响应式，并且<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=" …