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

列是响应式的,因此宽度会根据不同的屏幕大小而变化.图像都是不同的大小和宽高比.我不能使用bootstrap固有的.thumbnail类,因为它有很多我不想要的样式选项.
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开始很长,它可能会省略一些图像,但这可能是你最好的选择.

相关文章
相关标签/搜索