问题标签 [responsive-images]
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 - 使用 srcset 和 sizes 时 width 和 height 属性有什么作用？
如果我们使用srcsetand属性，将属性指定为后备sizes仍然很有用。src同样，我想如果指定了旧版浏览器，它们也会利用width和height属性。但是现代浏览器呢？
例如：
在这个例子中，现代浏览器的width和属性是否有用？height
html - `background-size` CSS 属性不适用于 html![]()
标签
如果我将图像源设置为 CSSbackground-image属性，它可以正常工作，但如果我通过 HTML 设置图像源，它会完全中断。为什么？
为了让这些图像正确显示，无论宽度/高度组合如何，我是否被迫从 CSS 声明它们的来源？
编辑：不知道downvote的问题是什么......我只是想知道是否可以让图像自动裁剪，这样即使您单独更改它们的高度和宽度，它们也可以保持原来的纵横比。这在使用背景图像时完美无缺，但显然不适用于内容。不管怎样，我现在得到了答案。
css - 如何使响应式标题中的空间相等？
我在主页上有一个大标题图片。我设法使图像在移动版本中响应，但我很难管理底部之后按钮和文本之间的空间。每个移动屏幕的空间都不相同。有时空间更大。
如何解决这个问题？您可以在此处查看移动版本
CSS（移动版图片标题的 CSS 之一）
html - HTML srcset - 何时使用 x 描述符？
我正在阅读 HTML5 中的响应式图像并有一个问题。
什么时候使用 x 描述符？例如，如果您有相同图像的不同分辨率版本，为什么您永远不使用 w 描述符？据我了解，如果您定义：
然后浏览器通过将图像的宽度（1024,640,320）除以它们将在（250）处显示的宽度（由大小属性提供）来计算像素密度。通过获取像素密度，浏览器可以解释高密度显示。
到目前为止我是这样理解的，如果我错了，我很想知道。那么什么时候 w 描述符不是最好的选择/什么时候 x 描述符更可取？
jquery - 加载 srcset 图像时出现问题
我一直在调整 featherlight.js 以启用 srcset。在 contentFilters: image: 我这样设置图像参数（请忽略笨拙的编码风格）：
变量“a”是文件 url。
原则上，这工作得很好。FF、Chrome 和 Safari 识别列出的来源并根据窗口宽度从不同文件夹加载图像。
但是，我遇到了一些在所有浏览器中都会出现的神秘行为。源图像通常根本不会显示，尤其是在调整窗口大小以便选择新源之后。显然，onload 事件在每种情况下都会触发，但图像不会显示。然后关闭并重新打开灯箱或调整浏览器窗口的大小将有助于绘制图像。显然，一旦图像加载到浏览器缓存中，这些问题就会消失。
我一直在尝试各种技巧来强制重绘或重新加载，但无济于事。欢迎任何关于可能发生的事情的线索。
html - 相对定位和绝对定位。强制标志移动到角落
假设我有这样的情况：
您可以看到几个主要部分：
- 面板（红色边框）
- 图片
- 标志
- 标题
我需要这个设置：
所以logo需要起来。通常，每次我尝试制作图像absolute和徽标relative时，然后将其浮动到右侧它就可以工作，但我松开了也位于图像下方的标题。
而且我不能使标题相对并以某种价值从顶部推送它，因为图像是响应式的并且将其更改为height.
这是我正在使用的代码。
javascript - 延迟加载不适用于光滑轮播中的响应式图像
我在延迟加载图像时遇到问题slick carousel。当我使用屏幕低于 980 像素的设备时，一切正常（按需加载较小的图像）。但是，当我在分辨率大于 980 像素的屏幕上时，它会加载所有大图像，而不是按需加载一个小图像。
.cshtml 文件
.js 文件
提前致谢。
html - CSS 属性“高度：自动；” 不适用于背景图像
我有一个具有视差滚动效果的网页，其中 CSS 属性height: auto;在三个背景图像中的任何一个的任何类中都不起作用。当我使用height: auto;图像消失。上传的三张图片的尺寸分别为w = 1280px和h = 800px。如果我使用height: 641px，那么图像会按比例缩小到w = 1025px和h = 641px。如果我使用不同的高度，那么宽度仍然是 1025px，但高度会更改为 CSS 中的值。这三个 CSS 类是：
该页面及其使用的 HTML 和 CSSheight: 641px;可以在http://codepen.io/mlswartz/full/NrpzpN/查看。这需要修复，以便正确响应图像。我正在使用 Bootstrap 3.3.6 和 Font-awesome 4.6.3。我使用的显示器具有 5:4 的纵横比，屏幕分辨率为 1280 x 1024。
image - 使用lazysizes 进行图片填充和延迟加载
我正在尝试使用lazysizes 和picturefill 进行延迟加载。
如果我只使用基本图像，则延迟加载本身就可以工作：
如果我检查 chrome 中的网络选项卡，我可以看到图像是在红线之后加载的，所以一切都很好：
现在我<picture>用我的响应式图像添加了一个元素，并尝试加载它也很懒：
不幸的是，这张图片不是延迟加载的，而是直接加载的：
我也尝试在图片元素图像中只使用一个 src，但这并没有什么不同。
根据lazysizes doc，应该可以一起工作，所以我想我只是错过了一个小细节？
更新： Lazysizes 和 Picturefill 都加载在<head>.
html - 缩小页面/视图时图像不断消失
只要屏幕变小，我的背景图像就会不断消失。我想让它响应。
这就是我的 CSS 代码：
这就是我的 HTML 代码