javascript - 是否可以强制图像达到设定高度但仍保持响应？

Question

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

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

右上角标有红色的海报导致布鲁斯·威利斯的海报占据了上“行”的空间，从而完全打断了 float 流。

向下跳可以通过使用内联 block 并且在网格元素上不 float 来解决，但这会导致图像上方和下方的空白看起来很糟糕。

这是它的样子:

这是我的标记:

<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 解决方案？

Answer 1

如果您的内联 block /无 float 解决方案很接近，但只是图像上方和下方的空间有问题，则可能有一些简单的修复方法。在看不到实际的最终输出和工作页面示例的情况下，我将尝试解决该特定问题。

确保首先设置“figure”元素的样式，将边距设置为 0em 以覆盖大多数浏览器默认值，这将插入 1em 的顶部/底部边距，通常在两侧插入一些。

确保海报的 img 元素的样式为 0em 的行高，可能还有 text-align:bottom(或您喜欢的顶部)。

您也可以为这两个元素设置 overflow:hidden!important 样式。

否则，您可以通过几种方式解决高度问题。如果您为父包含元素设置了默认高度，则始终可以在图像上使用 min-height:100% 。或者为图像本身设置一个以像素或 em 为单位的最小高度，并订购一些属性。

最大高度:100% 高度:汽车 最小高度:300px

如果您为 figure 或 div 元素设置了高度，您总是可以采用不同的方式处理标记，而不是使用 figure 元素，而是使用 background-size:cover 将海报图像替换为其他元素作为背景图像方法(考虑到您可能希望图像的大小差异不要太大，比如不超过 15-25% 的高度差异)，如果您有一些内容要插入容器(链接)。

或者，背景大小:100%； background-repeat:no-repeat 会产生一些相同的结果。

另一种选择是，您可以为这个用例中的图像元素创建一个自定义的、非常小的响应式网格，而不是使用 Bootstrap。或者，尝试运行一个脚本来处理从 API 中提取的图像，动态调整大小。您甚至可以先为图像分配一个具有统一高度和宽度的类，然后内联一个样式，并使用该样式设置响应功能，因为它会覆盖已经设置的类。统一设置尺寸，然后覆盖，您可能会或可能不会幸运。我们不喜欢内联样式，我知道......但有时你必须做你必须做的事。

假设一个响应式父容器包含 x% 和不同大小的图像:

在 img 标签上分类为统一大小... 高度:400px!重要； 宽度:250px!重要；

后跟内联样式... 宽度:100%!重要；

不需要 javascript。

无论如何，如果您不在服务器端统一图像，您就会看到大量的浏览器开销。