可变大小缩略图的图库

Question

我正在尝试制作一个引导图像库，其中图像具有最大高度/长度，但可以是限制范围内的任何大小。我希望max-width和max-height为百分比。

这是我的代码：

<div class="row">
        {% for reddit_post in reddit_posts %}
          <div class="col-lg-4 col-sm-4 col-xs-6 text-center">
            <div class="bottom-padded">
            <a class="modal-link">
               <center>
              <img class="thumbnail img-responsive" data-src="{{ reddit_post.thumbnail_link }}">  
              </center>
            </a>
          </div>
          </div>
        {% endfor %}
      </div><!--end row-->

CSS：

.thumbnail {
    max-width:  75%;
    max-height: 45%;
}

出于某种原因，画廊正在跳过单元格，图像不在正确的位置。

有一点需要注意，我懒得用Javascript加载图片。

我做错了什么还是有更好的方法来解决这个问题？