html - 如何让图像在 3 列网格上跨越 100% 的 div？

Question

抱歉这个菜鸟问题。

我有一个 1200 像素宽的网格。我有一个跨越 1200px 的 3 列。我知道问题是网格有效并跨越 1200 像素，但图像不匹配。我希望他们能够跨越 1200 像素。我尝试将图像 1 向左对齐，图像 3 向右对齐，中心图像对齐中心，但看起来唯一移动的是左边的，它在中心留下了更大的空间，所以它们的间距不相等。

我在 jsfiddle 上创建了示例 http://jsfiddle.net/sn7ojvLt/

<div class="grid">
  <div class="row">
    <div class="col-12">
      <img src="http://www.placehold.it/1200x50" alt="middle image">
    </div>
  </div>
  <div class="row">
  </div>
  <div class="row">
    <div class="col-4">
      <img src="http://www.placehold.it/380x230" alt="featured works">
    </div>

    <div class="col-4">
      <img src="http://www.placehold.it/380x230" alt="featured works">
    </div>

    <div class="col-4">
      <img src="http://www.placehold.it/380x230" alt="featured works">
    </div>
  </div>

Answer 1

您需要明确设置图像的宽度。如果将它们设置为 width: 100%，它们将填满整个列而不会扭曲。

http://jsfiddle.net/sn7ojvLt/2/