Mansory框架布局 - 空白问题

Question

我使用http://masonry.desandro.com创建漂亮的网格。

然而，当图像宽或长时，它会产生一些空白。

简而言之，卡宽度为23％，宽卡和长卡为48％，两者的余量均为1％。已启用框大小调整

我也尝试手动设置高度，但它没有多大帮助。

您也可以直接查看 http://dpmango.github.io/doctor-frank/dist/personal.html

笔也可用，但它与网站上的笔在视觉上不同 http://codepen.io/dpmango/pen/JbVPoy

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(searchString, position) {
    position = position || 0;
    return this.indexOf(searchString, position) === position;
  };
}

Css代码

.mansory-grid
  a(href="#modalPeopleOne").popup-with-zoom-anim.personal__card.personal__card--huge
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/frank_1.jpg").img-fluid

  a(href="#").personal__card.personal__card--no-hover
    img(src="http://dpmango.github.io/doctor-frank/dist/images/personal_1.jpg").img-fluid

  a(href="#").personal__card
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/13.jpg").img-fluid

  a(href="#").personal__card.personal__card--wide
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/4.jpg").img-fluid

  a(href="#").personal__card
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/10.jpg").img-fluid
  a(href="#").personal__card.personal__card--no-hover.mt30
    img(src="http://dpmango.github.io/doctor-frank/dist/images/personal_2.jpg").img-fluid
  a(href="#").personal__card.personal__card--long
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/2.jpg").img-fluid
  a(href="#").personal__card.personal__card--wide
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/5.jpg").img-fluid
  a(href="#").personal__card.personal__card--no-hover
    img(src="http://dpmango.github.io/doctor-frank/dist/images/personal_3.jpg").img-fluid
  a(href="#").personal__card.personal__card--long.mt30
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/6.jpg").img-fluid
  a(href="#").personal__card
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/11.jpg").img-fluid
  a(href="#").personal__card.mt30
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/12.jpg").img-fluid
  a(href="#").personal__card.personal__card--no-hover.mt30
    img(src="http://dpmango.github.io/doctor-frank/dist/images/personal_4.jpg").img-fluid
  a(href="#").personal__card
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/1.jpg").img-fluid
  a(href="#").personal__card.mt30
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/9.jpg").img-fluid
  a(href="#").personal__card.personal__card--long
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/7.jpg").img-fluid
  a(href="#").personal__card.personal__card--wide
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/3.jpg").img-fluid
  a(href="#").personal__card.mt30
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/14.jpg").img-fluid
  a(href="#").personal__card.mt30
    img(src="http://dpmango.github.io/doctor-frank/dist/images/people/8.jpg").img-fluid