如何使用响应式图像获得div并非无响应但流畅？

Question

我想制作一个缩小尺寸的布局，使用响应式图像，但不要叠加，我希望divs并排保留，但图像缩小。

这很简单，我无法找到答案！

我也在使用drrap，也需要使用Drupal，因此需要覆盖xs- * ect类。

下图显示了我的意思

＆＃13;

＆＃13;

<p>
  <img alt="" src="http://placehold.it/300/300" style="width: 0 auto; max-width: 50%; margin-right:5px;" />
  <img alt="" src="http://placehold.it/300/300" style="width: 0 auto; max-width: 50%; margin-right:5px;" />
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

了解库如何在内部工作以便您可以正确使用它们会很棒。在简单的CSS中，概念是在提及宽度时使用百分比，并且总是让它们流畅。

因此包装div必须是100％宽度，子宽度应该等于包装器的宽度除以子节点数。如果是2个孩子，宽度将分别为50％。

只有在您添加媒体查询时才会出现响应。因此，您可以在特定宽度上添加CSS，让孩子100％。我建议你理解Bootstrap的网格模式，然后解决你的问题。

Answer 2

此代码有效：

<div style="width:80%; margin: 0 auto;">

<div style="width:33.3333%; float:left;"><img class="img-responsive" src="OmegaT.png" style="margin: 0 auto;" /></div>

<div style="width:33.3333%;  float:left;"><img class="img-responsive" src="poedit.png" style="margin: 0 auto;" /></div>

<div style="width:33.3333%; float:left;"><img  class="img-responsive" src="trados.png" style="margin: 0 auto;" /></div>
</div>

Answer 3

我明白了。

我正在使用Drupal 7和boostrap。

问题是，即使Drupal将boostrap模板设置为默认值，也不是一切都是boostrap。

有些东西被覆盖，造成各种各样的问题。

解决方案是使用boostrap模块获取所有内容，例如bootstrap视图，boostrap显示套件等......

所以问题确实是Drupal问题。