问题标签 [responsive-images]

我维护的网站仅在动画时显示 .gif，所有非动画图像 100% 的时间都是 .png 或 .jpg。

当 Wordpress 自动调整图像大小以进行响应式显示时，是否可以使用挂钩来阻止 Wordpress 调整 .gifs 的大小？

我正在使用 Wordpress 4.4.1。

我有一张 1772 像素的图片。此图像是可用的最大图像。原始文件已消失，因此我无法创建 5120 像素宽的图像。如果我希望能够在 iMac 的整个宽度上很好地拉伸它，那么标记和 CSS 将如何查找该图像？

最低要求：

• 我正在使用 Bootstrap，所以它必须使用它。最好使用img-responsive内置类。我需要在div中有img-tag吗？container-fluid
• <picture>由于涉及艺术指导，因此需要使用-element。当视口达到 767 像素或更低时，我以纵向模式显示图像。

这是我正在试验的代码：

目前 firefox 和 Chrome 可以很好地拉伸图像，但 IE10 停止在 1772px 并在图像右侧留下空白。

如果我将图像设置img为width:100%会拉伸，但我很困惑这是不是正确的方法，因为他们在 Bootstrap 中使用max-width.

关于<img srcset=".." sizes=".."/>响应式图像的 html 标记 + 属性的问题。

• 在 3x 视网膜显示器 (3 * 341 = 1023) 上，srcset 中的 w 描述符是指设备像素 (1023px) 还是布局/css 像素 (341px)？
  编辑：显然 w 描述符指定了图像分辨率，这与设备像素或 css 像素无关。
  但问题是，浏览器如何选择提供的图像之一？基于设备像素，还是基于 css 像素？
• size 属性中的媒体查询是指设备像素还是布局像素？
• size 属性中的图像宽度 px 是指设备像素还是布局像素？

我自己的猜测是，尺寸总是指布局像素。但如果可以证实这一点，我会更喜欢。

（理想情况下，我希望根据设备上的像素密度提供不同的 jpg 质量。Retina = 低质量，高分辨率。但这可能是一个单独的问题）

此处的完整场景：响应式 img/srcset/sizes：不同的 jpg 质量取决于设备像素密度？

编辑：当我说“设备像素”时，我的意思是设备上的物理像素。

我正在寻找一种响应式图像策略，该策略允许根据设备像素密度提供不同的 jpg 质量。

在高分辨率的小屏幕上，我会提供低质量但高分辨率的 jpg。在像素密度低的大屏幕上，我会提供高质量的 jpg，与设备分辨率完美匹配。

问题：
这在某种程度上可能<img srcset=".." sizes=".." />吗？

背景/场景

• 具有不同原始尺寸的不同原始图像。
• 不同的图像显示上下文：作为图库缩略图、嵌入博客文章、模态框、全屏..
• 响应式布局，通过媒体查询改变这些图像的显示大小，不一定成比例。
  例如，在桌面上显示为 100 像素缩略图的内容可能会在移动设备上以全宽显示。
• 具有分辨率倍增器的高分辨率或“Retina”设备。在这些我想要很多像素，但文件大小很小。

我正在考虑的解决方案

我认为有希望的方法是<img srcset=".." sizes=".."/>.

但是，我想知道是否或如何组合 x 描述符和 w 描述符。

x 描述符指定相对大小。但相对于什么？原始图像大小和布局宽度都<img>可以在上下文和视口之间变化。视口报告媒体查询的宽度，但实际像素宽度可能是报告的视口宽度的 2 倍或 3 倍，这要归功于视网膜显示器。

w-descriptor 指定一个绝对大小。对于桌面上的缩略图大小和移动设备上的全宽图像上下文来说，这听起来要好得多 - 反之亦然。

问题/相关

如何根据设备上的像素密度提供不同的 jpg 质量？（如上问题）

相关问题：srcset 和 size 是指设备像素还是布局像素？

当我缩小屏幕的宽度时，我试图让我的导航栏与它位于下方的图片滑块一起移动，但不幸的是，导航并没有随着它上面的其余内容一起移动。这是该网站的链接... http://collegefundingremedies.herokuapp.com/

这是html...

这里是 SCSS (CSS)...

请帮助我使这部分响应！或者也许就我还能做些什么来让它看起来更好提供任何建议。谢谢！

我正在尝试为我建立一个网站，但我遇到了一些问题。

这就是我想要实现的目标：

Photoshop 图像

这就是我到目前为止所拥有的

实际图像

以下是我目前面临的问题：

1. 我无法摆脱导航栏下方的空白，我删除了导航和窗口其余部分的边距和填充，但它不起作用。

2. 我无法像第一张图片一样在中间垂直对齐文本。我尝试使用行高和填充，但是当我垂直调整浏览器窗口的大小时，文本不会响应大小。无论浏览器窗口的大小如何，我都希望它保持在中间。

3. 让背景图像适合窗口大小的最佳方法是什么？目前我正在使用

   宽度：100%；高度：100vh；背景图像：url（“图像/背景.jpg”）；背景尺寸：100% 100%；

但我觉得这不是最好的方法

到目前为止，这是我的文件：

如果有人可以帮助我解决所有这些问题，我将不胜感激

我已经尝试了两天，以使背景 img 响应移动设备。这是一个很长的主页（大约 8000 像素）。整个页面的内容有一个div父级“background_div”。我都尝试过，大小封面或包含标签，img 得到了像素化，就像它会被放大一样，内容是响应式的，但背景 img 让我头疼。我需要它来识别设备宽度、缩小并保持固定而不是沿着 8000 像素长的页面拉伸。任何人都可以告诉我这里有什么问题吗？

我的目标是创建一个响应式 SVG 徽标。到目前为止，我在这方面取得了一些成功，因为我可以使用媒体查询隐藏某些路径。

http://codepen.io/anon/pen/ZQmOMj

HTML：

SCSS：

但是，我猜测由于 SVG 上的 viewBox 属性，路径并没有真正隐藏，这意味着 SVG 不适应我的希望。

有谁知道解决方法，或者知道我可以使用的解决方案吗？

Safari 现在支持<img> srcset & sizes属性 ( http://caniuse.com/#search=srcset ) 并且在测试中可以正常工作。

如果您使用 Safari 访问功能检测库http://featurejs.comsizes ，它（错误地）报告不受支持。

因为sizesimg 对象中缺少。

如果我访问 Safari 中的页面，该页面的图像定义如下：

然后在控制台中试试这个：

但它img.sizes在 Chrome 或 Firefox 中正确报告。

我希望能够为动态添加的内容操作大小。

有谁知道进入该物业的任何方式？也许在 Safari 中它有另一个名字（一厢情愿）。

我有一个在 asp.net 框架上使用 SVG 坐标的网页。

通过试错，如果我取出大部分标签，我不会收到任何错误。但是如果所有标签都在我得到以下错误

源代码是

+8000 多行

我能做些什么？我需要使用元素标签，因为使用 jquery 我将在这些标签上发生事件。所以我不能只指向文件。我需要所有

更新我将内联多边形标签缩小到 898kb 的 1 行，并且我注意到 VSBComplier.exe（类似的东西）占用了我的所有 RAM 并使我的浏览器崩溃。

仍然必须在注释中取出 svg 才能进行调试。