Question

我有缩略图大小的问题。在图片中，左中间的白色区域应该有另一张图片，但是空格被跳过，因为上面的图片有一个很长的标题。每次出现带有长标题的图片时，尺寸都会变大。有没有办法可以修改缩略图大小，即使标题变长了？

这是我的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中的box标签（或标题标签）以防止任何过度调整

.class-name{
  overflow: hidden;
}

CSS overflow Property

Answer 2

使用 Flex ，您可以垂直对齐不同高度的孩子，而不会留下空隙。

<div id="outer-wrap">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

和CSS

div#outer-wrap {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100 vw;
}
div#outer-wrap .child {
  width: 33.3%;
}

HTML缩略图大小问题

2 个答案: