问题标签 [responsive-images]

我有八张 640x480 的图像。它可能会波动一两个，我希望它们均匀分布并集中在一行上。

IIUC iPhone 6 的屏幕为 1334x750。所以我希望至少有两个 640x480 的图像连续。然而，由于屏幕具有“高像素密度”，也许更多？

我的笔记本电脑的分辨率为 1080p，也就是 1920 像素，所以我希望至少三张图像可以清楚地显示在一行中。

对于不适合行的图像，我希望它们在下一行，或者稍微调整以适合。

我开始编写JSBIN，但我很困惑如何按照我想要的方式标记 Bootstrap。

我使用响应式文件管理器http://www.responsivefilemanager.com 我想多选图像文件，但我不知道配置

这是我的代码 html

嗨，我在使用 jQuery 循环的响应式图片库时遇到问题。

我的小提琴在这里 - https://jsfiddle.net/qxyodctm/5/

仅当您刷新浏览器时，您才会看到图像调整大小并正确限制其比例 - 但在浏览器缩放时，它们不会相互重叠并且宽度和高度错误。

有人帮忙吗？

非常感谢

我正在尝试使我的背景图像具有响应性，并且在台式机上似乎可以正常工作，但在移动设备上却很混乱。根据我老板的说法，特别是 iPhone 6 Plus。

这是我的代码：

该站点在这里，因此您可以对其进行测试：

http://www.breadtrails.com

背景：Bootstrap 3 连续布置 8 张图像的方式

我现在知道如何弯曲 3 张图片：

但我想介绍更小的WebP替代图像，我认为您可以使用图片元素来做到这一点。

但是，我不知道如何像使用 IMG 一样使 PICTUREs 3 的 CSS 格式并排。我错过了什么？

我有一排图像坐在一个流体宽度的容器中，图像之间有一个固定宽度的空间。如果容器缩小，图像需要流畅地调整大小并仍然适合容器的整个宽度。

为此，我使用了 white-space: nowrap; 和显示：表格；在容器上并显示：table-cell；在它的孩子身上。

然而，图像似乎以不同的因子缩放，导致一些图像非常小，而另一些则仅略小一些。我需要它们按比例缩放，我不知道怎么做！任何帮助将不胜感激！

HTML：

CSS：

有关现场演示，请参阅此笔： http ://codepen.io/anon/pen/PZPjop

我有一个程序员为我的网站编写了一个页面，但是当我们将代码迁移到我的网站（在 Shopify 上）时，一些事情停止了工作。我几乎可以修复所有问题，但顶部横幅仍然给我带来了麻烦。

我希望它填充整个浏览器宽度（就像页面下方的另一个横幅一样），但它被剪裁为 970px 宽。如何解决此问题以使其响应并填充整个浏览器宽度？我还希望整个页面在标题下居中。

我正在使用的代码在这里（我包括完整的代码，所以我不会错过任何重要的东西）：codepen.io/anon/pen/xZZwZN

当我在 codepen 中运行它时，它可以工作，所以我想知道它是否因为页面宽度编码到我的 Shopify 主题中而被剪裁了。有关如何仅在此页面上修复/覆盖此问题的任何想法？

我试图弄清楚这个网站是如何制作响应式标题图像的，该图像在 加载时填充窗口大小并随着窗口调整大小而调整大小，同时仍以原始比例填充窗口。

到目前为止，这是我想出的，但它非常有问题......

工作小提琴

我正在寻找一种在 php 旁边使用响应式图像属性“srcset”的方法。我目前正在使用以下代码从服务器上的目录中选择随机图像：

我在带有后缀的目录中创建了不同版本的图像（即 image-1-small.jpg、image-1-big.jpg ... image-2-small.jpg、image-2-big.jpg、image-1-small.jpg、image-1-big.jpg ... jpg 等）。

我将如何将 srcset 属性实现到 php 字符串中？我正在寻找与此类似的输出：

谢谢！

我想用 Typo3 7.6.2 LTS 和 fluid_styled 内容渲染响应式图像，如下所示：

对于 Typo3 6.2 LTS，我使用了 css_styled_content 并为此添加了以下 Typoscript：

但这不适用于最新的 Typo3 版本。

我想编辑fluid_styled_content 模板并使用viewhelper，但还没有响应式图像。

还有另一种可能解决这个问题（无需额外扩展）？