Question

我正致力于在bootstrap中实现方形图像的数据网格。一个要求是网格保持方形，图像在转换到较小的屏幕宽度时收缩。下面我有我当前的实现，它适用于大图像，但当我尝试使用低于一定大小的图像时，缩略图显示为大屏幕宽度的正方形。有人可以建议我如何适应较小的图像吗？此外，我强烈倾向于在不添加CSS的情况下执行此操作，如果不可能，我希望找到一种微创解决方案。

fiddle

HTML：

<div class="container">
  <div class="row">

    <div class="col-xs-6">
      <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://www.op-art.co.uk/op-art-gallery/var/albums/your-op-art/GDHarley_OP-ART_%2311.jpg?m=1382213140" /></a>
    </div>

    <div class="col-xs-6">
      <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://www.op-art.co.uk/op-art-gallery/var/albums/your-op-art/GDHarley_OP-ART_%2311.jpg?m=1382213140" /></a>
    </div>

  </div>

  <div class="row">
    <div class="col-xs-6">
      <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://davidsimpson.me/wp-content/uploads/2014/04/icon1281.png" /></a>
    </div>
    <div class="col-xs-6">
      <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://davidsimpson.me/wp-content/uploads/2014/04/icon1281.png" /></a>
    </div>
  </div>
</div>

Answer 1

较小的图片需要有100％的宽度，因此您必须使用CSS代码，只需添加此CSS类：

.full-width
{
    width:100%;
}

然后在标记中使用它：

<img class="img-responsive img-rounded full-width" ... />

在引导网格中为大屏幕尺寸制作矩形缩略图正方形

1 个答案: