图像未对齐（Bootstrap 3）

Question

我正在尝试创建一个简单的图库。 我有这段代码：

    <div class="{{ $image->category }}">
  <img
      src="{{ $image->path }}"
      alt="{{ $image->image_name }}"
      class="{{ $image->id }} img-thumbnail col-md-4"
      data-id="{{ $image->id }}"
      width="304" height="236"
      >
  </div>

（忽略{{ }} - 它用于laravel用法。）

这是我得到的输出 - 图库某些部分的未对齐图像： http://2.1m.yt/zy-iyJO.png http://2.1m.yt/KxfgdD.png

我怎样才能使它全部对齐？我应该手动调整我的图像大小吗？或者我可以编写一些代码来自动调整图像大小吗？我认为在这种情况下使用width="304" height="236" 无济于事。

非常感谢你的帮助，谢谢。