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

Question

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

在这里你可以看到我的意思：

右上角用红色标记的海报使得布鲁斯威利斯的海报占据了上排“行”中的空间，然后完全打破了浮动流。

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

以下是它的外观：

这是我的标记：

<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的网格系统。

现在我的问题是，我可以以某种方式使海报100％位于其所在的div高度，导致所有海报高度相等但在调整屏幕大小时仍然可以缩放属性吗？

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

Answer 1

如果您的内联阻止/无浮动解决方案已经关闭，但它只是图像上方和下方的空间，那么可能会有一些简单的修复。在没有看到实际的最终输出和工作页面示例的情况下，我将对这一特定问题进行一次尝试。

确保为您的数字设计风格。首先，将边距设置为0em以覆盖大多数浏览器默认值，这将插入1em顶部/底部边距，并且通常在边上插入一些边距。

确保海报的img元素的样式线条高度为0em，可能是text-align：bottom（或者您喜欢的顶部）。

您也可以使用overflow：hidden！important来设置两个元素的样式。

否则，您可以通过几种方式处理高度问题。如果您为父元素设置了默认高度，则可以在图像上使用最小高度：100％。或者为图像本身设置像素或ems的最小高度，并订购一些属性。

最大高度：100％ 高度：汽车 最小高度：300像素

如果你有一个图形或div元素的设置高度，你可以总是以不同的方式接近标记，而不是使用图形元素，用海报图像替换其他东西作为背景图像，使用background-size：cover方法（如果您要在容器中插入一些内容（链接），请考虑您可能希望图像的大小不要太大，例如高度差不超过15-25％）。

或者，背景大小：100％; background-repeat：no-repeat会产生一些相同的结果。

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

假设x％的响应父容器和不同大小的图像：

将img标记分类为统一大小... ！高度：400像素重要; ！宽度：250像素重要;

其次是内联风格...... 宽度：100％重要;

不需要javascript。

无论如何，如果您没有在服务器端统一图像，那么您会查看大量的浏览器开销。