问题标签 [responsive-images]

我已经阅读了许多关于使用srcset设备像素密度调整以及艺术指导的文章：

Paddi Macdonnell 2015 年的响应式图像状态

srcset 第 2 部分：Rich Finelli 的 W 描述符和大小属性

这些都没有明确说明是否可以在没有sizes属性的情况下使用 w 描述符。大多数表示相反（w-descriptor 与 一起工作sizes）

我自己的初步测试证实，图像切换确实只使用 w 描述符。

我发现，当使用 w-descriptor 根据它们的宽度指定许多不同的图像时，浏览器将选择适合有限空间的最佳图像。

不需要其他代码。

在设计响应式网站时，这显然是令人困惑的，因为作为设计师，我只需要以下情况：

1. 根据设备像素密度更改图像（对我有用。太好了！）
2. 根据可用宽度更改图像（艺术方向）（对我有用。太棒了！）

我想知道这sizes将如何影响这场灾难。我完全理解这是一个新功能。

我有一个大的背景图像，它是一个特定的高度和宽度，我对桌面感到满意。我正在使用背景位置中心顶部 atm，所以我可以看到整个图像，但随着浏览器宽度的减小，宽度会被裁剪。

图像有一个特定的中心部分是焦点，所以一旦我达到特定的浏览器宽度（大约 1000 像素 - 图像在宽度上被裁剪），然后我希望图像的可视区域向下响应移动设备保留浏览器规定的可见裁剪宽度......这可能吗？

非常感谢

我只是通过被扔到不同的项目中来学习编码，但我被困在我的页面上。几天来，我一直在努力使此页面具有响应性，但无法使其正常工作。是我的图像没有响应吗？还是它们所在的容器？我想不通。

Safari 9 完全能够 SVG 加载 home-2x.png 而不是在我的视网膜 MacBook 上。为什么不加载 SVG？我怎么能强迫它的手？

谢谢！

我编写了一个水平滚动照片库，其中图像根据视口大小进行缩放。我将图像的内联列表与img{max-height: 68%}. 这在 Safari 中效果很好，在 Chrome 和 Firefox 中失败。我已经尝试了很多方法（主要是使用 CSS 大小属性在图像周围创建 div），但是没有任何方法可以解决问题。

这是我的 HTML：

这是CSS：

在 Chrome 和 Firefox 中，无论视口大小如何，图像都会显示为全尺寸，因此会在其容器之外流动，完全破坏了设计。

任何帮助将不胜感激，因为我很困惑！

提前致谢....

我正在使用srcset为大型设备上的用户显示动画 GIF，但需要向中小型设备上的用户显示静态 JPG。

当我在 1x 屏幕上调整浏览器窗口的大小时，以下代码效果很好。我遇到的问题是在 iPad 上以纵向模式（768 像素）查看页面时，正在显示动画 GIF。我知道浏览器正在尝试显示更高质量的图像，因为它是 2 倍分辨率，但就我而言，它需要是完全不同的图像。

如果用户的屏幕宽度超过 940 像素，如何将其更改为仅显示 GIF？

该<picture>元素已经在 Chrome 中工作了一年多，但我无法获得工作的sizes属性<source>。

下面显示了媒体查询中断点的正确图像，但图像以其默认大小显示，而不是使用sizes属性中指定的值。

我错过了什么吗？

我一直在使用 jekyll 在我的投资组合网站上工作，而且一切似乎都在本地运行得很好。因此，对我来说，下一步是将其推送到 gh-pages 分支内的 github，当我这样做时，我会收到一封包含以下错误的电子邮件。

_layouts/post.html 中第 20 行的标签 responsive_image 不是可识别的 Liquid 标签。

我尝试使用的宝石是Jekyll Responsive Images。

就像我之前说的，当我运行 jekyll serve 时，我没有收到任何错误，我可以在本地运行我的 jekyll 站点，但由于某种原因，这个错误使我的站点无法使用 github。我的post.html文件看起来像这样。

在我的 _includes 文件夹中，我必须为 responsive_images gem 创建一个包含，它看起来像这样

这是我的 config.yml 文件，供任何想知道的人使用

有人对响应式图像 gem 有这个问题吗？我似乎无法在谷歌上找到答案。任何帮助将不胜感激。

我正在尝试编写一个类似于此页面上的标题图像：http ://www.eltrecetv.com.ar/nosotros-a-la-manana 。当您调整页面大小时，请注意该人的图像会发生什么变化 。它保持在同一个地方，它总是居中并且它不会裁剪（在底部有点但不是那么多）。这是我简明扼要的代码：（还有这里的小提琴：https ://jsfiddle.net/wvep5ga1/ ）

html:

CSS：

我发现的问题是，当我调整浏览器窗口的大小时，div 压缩到只能看到男人的脸的程度，这与原始页面中发生的情况相反，您始终可以看到肩膀。我不知道我是否正确地解释了这一点，但基本上在调整窗口大小时，div 的高度变化比它在原始页面上的变化快得多，这会影响页面的其余部分，因为男人的形象必须始终保持在同一个地方，并且必须始终具有相同的纵横比。我已经解决了纵横比问题，但是我在调​​整窗口大小时 div 的高度压缩和扩展过多。

我认为原始页面是使用 Drupal 7 完成的。但我想要的是一个可以做到这一点的css片段。我知道这是可能的，我已经尝试了几个小时，但我错过了一些东西。我知道原始页面使用了许多具有不同分辨率的图像，但这不是问题。

希望有人可以提供帮助。我期待着您的评论。

提前致谢！

下面是我申请的一段css来带来这个背景：

我在其他部分使用相同的 css 代码，它工作正常。我不知道这里有什么问题。背景图像尺寸为 1600px * 400px。