是否可以强制图像设置高度但仍保持响应？

【问题标题】：Is it possible to force images to be a set height but still remain responsive?是否可以强制图像设置高度但仍保持响应？
【发布时间】：2015-10-08 01:13:50
【问题描述】：

我正在使用电影 API 来获取一些图像海报并将它们显示在网格中，问题是大约 10% 的海报与其余的大小不同，从而导致网格系统到处都是空白并导致其他图像跳下。

在这里你可以明白我的意思：

右上角标记为红色的海报导致带有布鲁斯威利斯的海报占据了上“行”的空间，从而完全破坏了浮动流程。

可以通过在网格元素上使用 inline-block 和没有浮动来修复跳下，但这会导致图像上方和下方的空白看起来很糟糕。

看起来是这样的：

这是我的标记：

<div class="row">
  <h1 class="text-center">Similar movies</h1>
  <div ng-repeat="movie in similarMovies" class="col-xs-12 col-sm-6 col-md-3 cut-off">
    <a href="#/movies/{{movie.id}}">
      <figure>
        <img ng-src="{{getSrc(movie.poster_path)}}" alt="{{movie.title}}" class="image enlarge">
      </figure>
    </a>
  </div>
</div>

为此，我正在使用 Bootstrap 的网格系统。

现在我的问题是，我能否以某种方式将海报设置为它所在的 div 高度的 100%，从而导致所有海报的高度相同，但在调整屏幕大小时仍然缩放属性？

我认为实现这一点的唯一方法是通过一些 hacky JavaScript 解决方案？

【问题讨论】：

• 就我个人而言，我会反其道而行之。我会为每个图像设置一个高度和/或最大高度，因此

  的高度将由它们的内容决定。这也意味着，如果某些图像的分辨率较低，它们仍将被渲染为与所有其他图像相同的高度。
• @KieranPotts 问题是它们来自 API，如果我必须为每个图像运行某种映射函数，感觉会减慢很多速度。
• 问题很难理解，这个demo有帮助吗？
• @Pangloss 我认为这很清楚，我尝试使用表格单元格，但是当您必须在 Angular 中使用 ng-repeat 循环出元素时效果不佳，然后我必须插入一个每 2-4 个元素的表格行取决于屏幕大小，它很快就变得一团糟。
• @Chrillewoodz 不确定它应该是什么样子，那么表格布局可以解决高度问题吗？如果每行中有固定数量的图像，这听起来像是一个简单的循环，您也可以使用表格行，但我对角度知之甚少。