问题标签 [srcset]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - Chrome/FF 上 Srcset 的默认宽度
我正在实现一个我们想要使用 srcset 的页面。问题是我希望图像以默认大小呈现，而不设置其宽度。
似乎这在 Chrome/FF 上是不可能的。令人惊讶的是 IE11 显示了这一点，因为我认为它应该..
看看这个例子：
在这里，您会看到图像将采用尽可能多的宽度，即使图像要小得多。
如果你不设置 srcset 它加载它的初始大小：
我不知道这是否是一个错误，但有谁知道我如何使用 srcset 并且仍然将图像显示为原始大小而不是浏览器放大它？
django - django cms 和响应式图像
我正在用 django 和 django-cms 构建一个响应式网站。到目前为止一切都很好。现在，我需要指定响应式图像并将其传递到不同的设备。你如何为自己解决这个问题？
网站作者是否有可能在后端上传不同尺寸（如小、中、大）的图片以与 srcset 一起使用（可能与django-cascade一起使用）或者是否有 django 和 django-cms 之类的自动化解决方案php-project自适应图片。
我找到了 django-daguerre，但我不知道如何用 django-cms 实现它。还有django-responsive-images 1.0.2 包。
所以我想问你如何为你的项目解决这个问题。
css - img srcset 在 iMac 5k 显示器上选择 1x
我想创建一个全角引导滑块，我需要它在 5k iMac 上工作，所以我继续添加我的图像，如下所示：
<img srcset="http://placehold.it/1920x800 1x, http://placehold.it/3840x1600 2x, http://placehold.it/5120x2130 4x" alt="Retina" />，但 chrome 加载了1x图像。
经过一番谷歌搜索后，我这样做了：<img srcset="http://placehold.it/1920x800 1920w, http://placehold.it/3840x1600 3840w, http://placehold.it/5120x2130 5120w" alt="Retina" />chrome 选择了3840w图像，它填充得很好，但是这种语法（使用w）在 Safari 上不起作用，而且，正如你可能猜到的，我需要 safari 支持。
5k iMac 显示器是否被视为 1x？如果是这样，一些polifill可以解决我的问题吗？
编辑： JsFiddle
html - 响应式图像如何使用以“sizes”长度提供的“em”？
em在响应式图像中使用时，浏览器如何理解单位？
这验证了，我没有在浏览器控制台中看到警告。但是，如果图像预加载器的全部目的是在下载和解析 CSS之前获取图像，那么浏览器有什么用em呢？
它只是font-size适用于它的默认值<html>吗？为了清楚起见，我应该使用rem吗？当用户缩放时，两者之间有区别吗？
这不是理论上的；我在我的媒体查询断点中使用em，并且一些图像受容器的限制，该容器的大小适合最佳行长（当然是使用em）。
我检查了规范，但它对新的响应式图像功能非常简洁。
html - Firefox：指定 2x srcset 的 Img 在浮动时有奇怪的间距
我有这样的HTML：
像这样的CSS：
仅在 Firefox 中，当在“视网膜”显示器上查看时，这会导致.left div（未width指定）具有双倍宽度。我无法在任何其他浏览器上复制它。
截屏：
在这支笔中重新创建。
html - 如果调整浏览器窗口大小，是否可以重新计算使用的 `srcset` 图像？
页面加载后是否可以srcset重新计算浏览器窗口大小，从而更新其使用的图像。
你想这样做的原因是因为如果在桌面上你压缩了浏览器窗口，加载一个站点，然后使浏览器窗口变大，它只会缩放“small.jpg”（如 中所设置srcset）所以用户最终会得到一个像素化的图像。
我开始制作一个 jsfiddle 来显示这个问题，但它并不能很好地工作，因为我认为srcset是由浏览器窗口计算的，而不是 jsfiddle 结果网格。
如果您有兴趣，可以将其复制并粘贴到一个空白html文件中并在本地服务器中运行它（必须在本地 http:// 服务器上，以便您可以查看网络调试选项卡以查看浏览器加载了哪个图像）。通过文件 url 在浏览器中运行它file:///不会让您查看通过网络调试选项卡加载的图像。
html - 是否可以通过浏览器开发人员工具查看浏览器正在使用哪个 srcset 图像
我一直在尝试srcset通过浏览器开发工具查看我的浏览器正在使用哪个图像，但除了使用网络选项卡查看它获取的图像之外，我无法分辨。
使用网络选项卡通常会很好，但有时我注意到它会获取 2 个不同大小的图像版本，如果一个断点位于 600，另一个断点位于 900，并且浏览器当前为 750 像素宽，则会发生这种情况。
（我在 Chrome 和 FireFox 上都试过这个，似乎 chrome 在某些情况下会拉下两个图像，但 FireFox 似乎只拉下一个）
我想知道的原因是如果它拉下两个图像 srcset 剂量它会在我缩放浏览器窗口时自动在它们之间交换吗？这是无法通过检查元素来判断的，它只是给出了元素的原始 html img，而不是它使用的实际img srcset选项。
html - `size` 是否需要与 `srcset` 一起使用，有什么优点/缺点？
是否size需要搭配使用srcset？我有一个网站，除了一个 50 像素的板外，还有一个几乎全屏的大图像。此图像的比例不需要根据不同的屏幕比例/尺寸而改变。
目前我正在使用srcset这样的：
这样做的问题是，如果用户在桌面上在压缩浏览器中打开站点（因此将加载小图像）然后使他们的浏览器窗口更大，则小图像将被缩放，因此现在将被像素化. （如果他们刷新页面，他们现在将获得大或中图像，但我怀疑任何人都会在每次调整浏览器窗口大小后刷新页面）
通过使用该size属性，如果调整浏览器窗口大小，它会尝试重新计算要使用的图像吗？如果不是，该size属性的用例是什么？
html - 使用服务器端调整大小时“无限”或“智能”srcset？
我正在使用服务器端图像通过 URL 动态调整大小，例如<img src="converter/500w/picture.jpg">. 这意味着我可以提供几乎无限数量的图像尺寸。现在我正在使用<img srcset="...">（以及<picture>标签）来提供各种或多或少随机选择的图像尺寸。但是，这会导致大量标记，并且不是很灵活。
是否可以使用
srcset（或其他 HTML 标记）告诉浏览器如何请求任意大小的图像？如果没有，是否可以在所有浏览器中可靠地使用 JavaScript/jQuery 来做到这一点？是否可以明智地决定要在您的
srcset. 我在想与您的断点相关的宽度将是很好的候选者，但这并不能说明高 DPI 设备。
我意识到“无限”srcset是有代价的。服务器上的处理可能很繁重，但这在很大程度上取决于您的访问者（屏幕规格的数量和变化）。磁盘空间也是一个问题，但可以通过垃圾收集来缓解（尽管这会增加第一个问题的影响）。不过，我想知道这是否可能，如果没有，是否有明智的分辨率选择。
css - 对象拟合：Cover 和 Srcset
我正在使用object-fit: cover一堆图像。图像的框架占据50vw并具有动态高度。封面属性效果很好，但这意味着我真的不知道我的实际图像在给定时间会有多宽。
它很可能会比 更宽，50vw并且由于适合对象的覆盖，它的溢出将被隐藏。
当我尝试使用 srcset 时，问题就出现了。我无法为尺寸属性提供可靠的宽度。
我知道大小只需要一个近似值，但我很好奇是否有人以前处理过这个问题。