responsive-design - Zurb 响应式图像大小不起作用

Question

我使用 zurb，我有 1 行和 4 列，我在这 4 列中有 4 个图像。图像的大小并不完全相同，因此在获得 100% 清晰度的图像之前，我必须为每个图像指定宽度和高度。

我想问一下我必须使用哪个类以及如何使我的图像响应（比率），同时我正在减小浏览器窗口的大小，并且随之而来的是响应式列的大小？

这是我的代码：

<div class="row">
   <div class="three columns">
      <img src="something.jpg" style="width:220px; height:200px;" />
   </div>
   <div class="three columns">
      <img src="something.jpg" style="width:223px; height:190px;" />
   </div>
   <div class="three columns">
      <img src="something.jpg" style="width:210px; height:150px;" />
   </div>
   <div class="three columns">
      <img src="something.jpg" style="width:210px; height:195px;" />
   </div>
</div>

我不使用内联 CSS，它只是宽度和高度的示例。

谢谢你。

Answer 1

我以某种方式在 .css 中对这部分进行了评论：

/* line 45, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zurb-foundation-3.0.4/stylesheets/foundation/grid.scss */
img, object, embed {
  max-width: 100%;
  height: auto;
}

有了这个，我的图像是响应式的。