如何在bootstrap中创建一个完美方形图像的2列网格？

Question

列是响应式的,因此宽度会根据不同的屏幕大小而变化.图像都是不同的大小和宽高比.我不能使用bootstrap固有的.thumbnail类,因为它有很多我不想要的样式选项.

Answer 1

HTML

<div class="row">
    <div class="col-xs-6">
         <div class="square"></div>
    </div>

    <div class="col-xs-6">
        <div class="square"></div>
    </div>
</div>

CSS

.square {
    width: 100%;
    padding-bottom: 100%;
    background-image: url('your_img');
    background-size: cover;
}

这将尝试尽可能多地将图像放入正方形中.如果它的宽高比从1:1开始很长,它可能会省略一些图像,但这可能是你最好的选择.

Answer 2

这是只做 2 列的方法

<div class="row show-grid">
      <div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div>
      <div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div>
    </div>

希望这可以帮助。

有关网格的更多信息：http ://getbootstrap.com/css/#grid