问题标签 [responsive-images]

我有以下图像标签，使用srcsetandsizes属性插入响应式图像：

据我了解，我只是告诉浏览器所有可用的图像大小，它应该只下载基于视口大小等最合理的大小。如果我将浏览器窗口（Chrome）的大小调整为小并刷新页面，“网络”选项卡告诉我，它同时下载了我期望的图像（在这种情况下为 800 像素）以及最大的图像（我从src属性中假设）。

我已经尝试过使用和不使用 picturefill.js，并且我在 OS X 10.10.5 上使用 Chrome 45，所以我认为这不是浏览器兼容性问题。我的语法有什么问题还是我只是误解了 srcset？

因此，我一直在为这组代码苦苦挣扎一段时间，而我已经快要完成它了。

第一个问题是让我的图像响应高度和宽度，但经过一些讨论，我能够弄清楚如何通过简化代码和使用颜色作为占位符来使其响应，但现在我不知道如何重新添加背景图像。

这是 OG 代码笔，http: //codepen.io/anon/pen/YypXjw

现在就在这里，http://codepen.io/anon/pen/rOWXzW

我不知道为什么我也无法显示 html。

所以代码被清理了，现在我需要弄清楚的是如何在翻转的 div 中添加前后图像。

我尝试像 og 代码一样添加前后 div，但仍然无法使其正常工作。

非常感谢任何帮助或建议。

我正在尝试制作具有不同图像和不同尺寸的图像库。我已经包含了一个图片链接来解释我想要什么。我用 4 个 div 排成一行，每个 div 都包含一个图像。图像具有宽度和高度。但是我的图像有不同的尺寸。即600X500。我正在使用引导程序。

如何让图像填满整个 div (400 X 400) 并且仍然响应？

我试图给图像一个固定的高度和宽度，但是图像不再响应。

CSS

这就是我想要做的，某种图片库

当浏览器达到特定的屏幕尺寸时，我正在尝试使用 srcset 属性交换图像。当屏幕尺寸大于 768 像素宽时，我需要显示桌面图像。

在大多数浏览器（Firefox 除外）中，我已经能够使用下面的代码完成此操作。我对“srcset”游戏很陌生，所以我不确定我是否有语法错误。牢记视网膜设备，有人知道我在这里缺少什么吗？浏览器对 srcset 的支持似乎足够了，所以我不确定是什么原因造成的。

我是使用 bootstrap 3 的新手。我需要您的帮助，了解如何在使用绝对位置、顶部和左侧时使图像响应？我的图像位于一张图像之上，每当我重新调整浏览器的大小时，图像将不再位于它们的位置（桌面大小）。

我在我制作的登录页面中遇到了 Bootstrap 的问题...

我有以下代码

哪个以及当我将它加载到我的浏览器上时它播放完美，但是我将窗口变小等。但是当我从我的三星 Galaxy s5 mini 加载它时，后台没有响应。它会在中间切开背景，并在页面的下半部分显示白色。

更新 1

仅在带有 Chrome 或 Internet 应用程序的 android 智能手机中检测到此问题。

当有人用 iPhone 尝试它时，它会完美播放！

这是网站

http://79.170.44.145/irem.co.vu/test-ptx/index.html

ANDROID 的图像就是这些。 苹果手机

ANDROID Chrome 浏览器和互联网也

有什么建议么？

我是Foundation and Interchange的新手。我在http://foundation.zurb.com/docs/components/interchange.html上参考了关于背景图像的非常有限的文档，但找不到任何适合我的东西。我相信我没有做错任何事情，但屏幕上没有出现图像，或者即使它出现在我以“像素”为单位指定高度之后，它也不会调整大小。这太令人沮丧了！

我希望网站设计上的背景图像与“中”和“小”屏幕的图像选项一起响应。并且可能有一个自动更改图像的旋转木马，但拥有响应式背景是目前最大的挑战，所以我不知道我将如何到达那里。

此外，酒店网站还有 2 个预订引擎。我希望在您选择酒店 1 后，您应该在单击立即预订后转到 BOOKING ENGINE-1。同样，当单击 BOOK NOW 时，HOTEL-2 应该转到 BOOKING ENGINE-2。同时，它应该将 CHECK-IN & NIGHTS 的数据发送到相应的预订引擎。

非常感谢任何专家的帮助。

我的设计是：

我的代码是：

使用 Bootstrap - 如何将 div 从右、左、上和下居中，并且能够使图片响应？我试过这个：

但它禁用了 img 响应。有什么解决方案可以让它们都工作吗？

我正在对用于自动化srcset和sizes创建的 grunt 插件进行重大更新，最近对 Chrome 的行为感到困惑（我在桌面上使用 Chrome 版本 46.0.2490.80 m）。我查看了Yoav Weiss 的演示，发现当我将浏览器宽度调整为 400 像素时，Chrome 正在下载两个图像——招聘和移动。

演示页面上使用的代码如下所示：

在我的个人博客上也发生了同样的情况，其中 -large 和 -medium 图像都被加载了。

我已经与 Yoav 进行了 Twitter 对话，但他无法重现该场景。那里的其他人可以重现吗？是浏览器的错误吗？我对响应式图像有基本的误解吗？任何建议表示赞赏！

我很想知道您如何解决以下问题。

使用具有 24 列和 30 像素的网格间距的 Bootstrap 3。在宽屏显示中，我使用 col-7 作为左侧边栏，使用 col-17 作为主要内容。问题是引导程序正在用百分比计算宽度。所以我有 339.5px (29.16667%) 用于侧边栏，824.484px (70.83333%) 用于内容。

现在，我使用一些脚本，如lazysizes 和lazyaspectratio 来延迟加载我的图片，并让图像容器保持相同的尺寸，即使图像尚未加载也是如此。使用lazyaspectratio，宽度必须为 100% 才能重新计算要保留的高度。

但是...因为有一个但是...如果我的主要内容是 824.484px 宽度，图片也是 824.484px 宽度，并且图片质量很差。假设我的图片显示必须是 824 像素，最终的图片显示很糟糕，而且我失去了质量，即使比例得到尊重。

我的问题是：如何用 img > width=100% 绕过这个问题？

我在几个线程上看到人们“修复”了行子的宽度，如下所示：

保持 img > width = 100% 并具有整数列宽度似乎是一个很好的解决方案，但是使用此解决方案，我必须添加许多 css 规则来管理多个 col-* 和多个媒体查询...

你呢 ？你如何解决这种问题？因为我认为使用宽度 = 100% 的 img-responsive 类会导致 Bootstrap 3 基于百分比宽度的质量损失......我确信我不是唯一遇到这个问题的人。

提前感谢您的任何建议。