问题标签 [responsive-images]

我目前正在为一家公司开发移动登录页面。这是一个非常基本的布局，但在标题下方有一个始终为 100% 宽度的产品图像（设计显示它总是从边缘到边缘）。根据屏幕的宽度，图像的高度显然会相应地调整。我最初使用 img（CSS 宽度为 100%）进行此操作，效果很好，但我意识到我想使用媒体查询来提供基于不同分辨率的不同图像 - 比如说小型、中型和例如，同一图像的大版本。我知道您不能使用 CSS 更改 img src，所以我认为我应该为图像使用 CSS 背景，而不是 HTML 中的 img 标签。

我似乎无法正常工作，因为带有背景图像的 div 需要一个宽度和一个高度来显示背景。我显然可以使用 'width: 100%' 但我用什么来表示高度？我可以放置一个随机的固定高度，例如 150px，然后我可以看到图像的顶部 150px，但这不是解决方案，因为没有固定高度。我玩了一下，发现一旦有高度（用 150 像素测试），我可以使用“背景尺寸：100%”来正确地将图像放入 div 中。我可以在这个项目中使用更新的 CSS3，因为它只针对移动设备。

我在下面添加了一个粗略的示例。请原谅内联样式，但我想举一个基本的例子来尝试让我的问题更清楚一点。

我是否可能必须根据整个页面为容器 div 指定一个百分比高度，或者我是否完全看错了？

另外，你认为 CSS 背景是最好的方法吗？也许有一种技术可以根据设备/屏幕宽度提供不同的 img 标签。总体思路是，着陆页模板将多次用于不同的产品图片，因此我需要确保以最佳方式开发此模板。

抱歉，这有点啰嗦，但我从这个项目到下一个项目来来回回，所以我想完成这件小事。提前感谢您的宝贵时间，非常感谢。问候

我正在尝试使用标签srcset和标签。sizesimg

虽然我认为我已经掌握了基础知识——主要归功于这篇文章——但我在该sizes属性的实际应用中苦苦挣扎。

在我能找到的所有示例中，事情都被大大简化了，并且 size 属性被声明为好像在每个断点处，图像宽度将是视口宽度的精确比例，允许使用vm单位。例如：

当然，在现实生活中，图像通常位于其他容器中，而这些容器本身可能位于其他容器中等等，每个容器都有自己的边距、填充或定位。

公平地说，除了最简单的情况（当图像具有流体宽度并且不仅仅是视口的确切百分比时），calc必须使用，这可能会在 html 标记中添加极其复杂的计算，因为图像尺寸需要从视口宽度开始计算，通过任何容器到图像？例如，您将如何计算位于具有 7px 填充的容器的图像的正确大小，该容器本身位于其容器的 45% 的容器内，具有 15px 边距的边栏位于主页面容器的 25% 内15px 的填充，最小宽度为 1220px？

试图在 size 属性中计算这一点似乎很可笑，尤其是考虑到所有这些都可能在每个断点处发生变化。必须让这种大规模复杂的计算与 CSS 的更改保持同步似乎很疯狂。然后你有不完整的浏览器支持calc。

我觉得我错过了一些明显的东西，但它是什么？

注意：我知道 Alexander Farkas 出色的Lazy Sizes，它通过使用data属性为您计算尺寸，但我对标准用法感兴趣。

所以这正在杀死我。

我查看了很多论坛，但似乎无法找到任何可行的解决方案。

基本上，我有一个浮动元素网格，每个元素都有一个悬停时的缩略图图像，具有该画廊所包含内容的叠加层和文本描述（这是一个典型的作品集网站）。

通常我只有一个固定的布局，一个与每个图像大小相同的覆盖框和一个宽度相同的文本容器，它在悬停时打开和关闭，这很好。但是 - 这是我的第一个响应式网站版本，我不知道如何使叠加层和文本的大小与其父级的尺寸相匹配。

我尝试将它们全部包装在一个 div 中，但子元素似乎无论如何都忽略了父尺寸 - 大概是因为它们是浮动的。

我正在使用fancybox画廊，有问题的缩略图标有评论，但其他方面效果很好。

有没有办法告诉一个 div 匹配另一个响应式 img 的宽度？任何帮助将非常感激。

这是我的html

这是我的 CSS

我正在尝试使用背景图像创建响应式标题。当我添加画布外菜单汉堡图标时，我会在视口顶部显示一条身体背景。

我究竟做错了什么？

我在 div 中具有相等纵横比（300 像素 x 255 像素）的图像，占宽度的 31%，在桌面/平板电脑上制作 3 列，然后在移动设备上制作全宽。图像在 div 内缩放到 100%，高度设置为自动。我需要将它们从 img 标签更改为背景图片

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

有没有办法让这些图像成为背景图像，并且仍然让纵横比决定 div 的高度——允许相同的响应缩放？如果可能的话，我希望有一种方法可以在不使用 .js 的情况下做到这一点。可以只用 CSS 完成吗？谢谢！

我正在为这个网络应用程序使用 Bootstrap v3.3.5 轮播，图像的尺寸是固定的（970x180），所以我也固定了轮播尺寸。

但是，当从智能手机浏览此应用程序时，图像无法正确调整大小，并且只有一半的图像可见。

这里有什么建议吗？

我们想要做一个图像网格，其中每一行是任意数量的图像，这些图像具有相同的高度但可能具有不同的宽度。随着浏览器宽度的变化，整个事情需要增长和缩小。

到目前为止，我提出的最佳解决方案是：

和CSS：

这样做的主要问题是，如果同一行中的图像具有不同的宽度，则它们的高度并不完全相同，并且看起来很糟糕，因为填充不均匀。如果所有图像的大小完全相同，或者我将 CSS 中的 padding-right 设置为 0，它就可以正常工作。

另一个问题是我们必须计算每个图像的百分比，这有点耗时。

另一个问题是图像底部有一个我无法摆脱的 4 像素填充/边距。

做这个的最好方式是什么？我可以进行一些细微的修改来解决其中的一些问题，还是应该使用完全不同的结构？

这是上面代码生成的屏幕截图：

您可以看到第二行中图像的高度并不完全相同。

我将 picturefill.js 用于响应式图像功能。当我在未指定高度和宽度的情况下放置原始图像时，图像会显示在<picture>标签中，并根据屏幕尺寸拉出不同尺寸的相同图像。

但是当我指定高度和宽度时，响应功能不起作用。图像加载有<img>标签。

这是链接

据我所知，srcsetandsizes属性更侧重于为设备的大小和分辨率应用适当缩放的图像。

似乎没有工具可以使用这些属性来根据屏幕尺寸选择替代图像，例如裁剪或定向不同的图像。

这是对情况的正确理解吗？这是否意味着我们将不得不等待该picture元素被广泛支持来完成这项任务？

过去几天我一直在研究这个问题，虽然发现了几种在静态布局中运行良好的解决方案，但我在响应式设计中遇到了问题。

我们在主页上使用了一系列横幅图像，并试图让它们在较小的移动屏幕上显示在文本后面的图像的中心。我可以为固定宽度解决这个问题，但我们需要让它响应。

这是我的 CSS 代码的当前版本：

挑战似乎是向左移动——现在，图像只是向左移动了 img 宽度的 50%（不足为奇）。如何对 CSS 进行编程以仅将图像偏移到使图像在嵌套 div 标签居中所需的量？

提前谢谢了。