Question

还是全新的CSS，所以请保持温和;）。我有一个如下所示的网格设置：

<div class="row">
     <div class="col-lg-2 col-sm-3 col-xs-4">
       <a href="#" class="thumbnail">
          <img src="http://placehold.it/150x150" class="img-responsive">
       </a>
     </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#" class="thumbnail">
          <img src="http://placehold.it/150x150" class="img-responsive">
        </a>
     </div>
</div>

问题是当我实际用图像填充src时，无论图像大小是什么，我都希望图像实际上强制“填充”占位符。换句话说，我应该应用一个比例，以便填充150x150？宽度（最大宽度：100％）是合适的，但高度是自动的。我试过调整高度，宽度，最大高度等没有成功。

Answer 1

尝试在图片标记中添加高度和宽度属性，如下所示：

<img src="..." height="150" width="150">

不确定这将如何与bootstrap的响应式图像类进行交互。最佳做法是实际插入具有正确尺寸的图像。

Answer 2

我也是新手。我一定比这更长时间地搞乱了这个，但基本上这里是我发现的作品

您希望在bootstrap的css之后加载自定义样式表，这样您就可以在不破坏原始css的情况下进行自定义调整。然后，您可以进行调整：

.thumbnail-image {
overflow: hidden;
height: 150px; 
}

.thumbnail-image > img {
    width: 100%;
}

然后我将图像夹在一个div与HTML中的“thumbnail-image”类之间。

<div class="row">
     <div class="col-lg-2 col-sm-3 col-xs-4">
       <a href="#" class="thumbnail">
       <div class="thumbnail-image"><img src="http://placehold.it/150x150"></div> 
       </a>
     </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#" class="thumbnail">
       <div class="thumbnail-image"><img src="http://placehold.it/150x150"></div> 
       </a>
     </div>
</div>

当在断点处调整列大小时，您必须对自定义.thumbnail-image类的自定义高度属性进行一些类似的调整，但除此之外，这是我想出来的！

使用bootstrap创建具有“动态”图像大小的网格

2 个答案: