HTML 缩略图大小问题

Question

enter image description here

我对缩略图大小有疑问。在图片中，左中间的白色区域应该有另一张图片，但由于上面的图片标题很长，因此跳过了空间。每出现一张标题很长的图片，尺寸就会变大。即使标题变长，有什么方法可以修复缩略图大小？

这是我的 HTML 代码和 CSS，我什么都没写。

<div class="panel-body">
  <div id="recipeResults" class="row">
    <!-- templates/BasicImages/imageTemplates.js -->
  </div>
</div>

这是实际代码。对不起:)

<div class="col-sm-6 col-md-4">
  <div class="thumbnail">
    <div class="hovereffect">
      <img class="img-responsive center-block" src="{{json.url}}" alt="{{json.alt_name}}">
        <div class="overlay">
           <h3> {{json.hoverDescription}}</h3>
           <a class="info" href="#"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>{{json.cookTime}}</a>
        </div>
    </div>
        <div class="caption">
      <p style="font-size: 1pt;">&nbsp;</p>
      <h4>{{json.name}}</h4>
      <p>{{json.description}}</p>
      <p><button type="button" class="btn btn-default btn-sm" aria-label="Left Align">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Save
        </button></p>
    </div>
  </div>
</div>

Answer 1

您可以在 CSS 中将此代码用于框标签(或标题标签)以防止尺寸过大

.class-name{
  overflow: hidden;
}

CSS overflow Property