图片无法响应屏幕宽度

Question

在我的员工网站上，我已经成功创建了一排图像，但是当我更改浏览器窗口大小时，图像不会进入一个整齐的行，它们会在一起并且一张图片消失： 有什么帮助吗？

此外，我使用的代码在这里：https://github.com/Studio-Dracocoa/studio-dracocoa.github.io/blob/master/staff.html

Answer 1

将此样式添加到<img>以防止它们“拼接”在一起：

img{ max-width: 100%; }

我在下面添加了一点保证金

这是Fiddle。

<强>更新

将您的引导程序col从col-md-4更改为col-xs-6 col-md-4，它应该可以解决此问题。

更新2

要将它们放入较小视图的列中，请将引导类col-xs-6 col-md-4更改为此col-xs-12 col-md-4。

然后因为你的所有<img>都是绝对定位的，所以它们不会叠加，因为绝对定位的内容不占用DOM中的空间，因此它们将全部放在彼此之上。要解决此问题，您可以将bottom img设置为position:relative;，以便占用空间并进行堆叠。我还在top:0;类中添加了.top样式，以便将其固定在左上角。

请参阅此更新Fiddle以获取演示（调整框架窗口大小以查看其是否有效）。

此外，您应该将#biop div更改为类.biop并相应地更新您的样式。每个元素的ID应该是唯一的。类用于多个元素。您有2个ID为biop且无效的div。