如何确保图像响应灵敏且高度相同？答案

【问题标题】：How to make sure images are responsive and same height?如何确保图像响应灵敏且高度相同？
【发布时间】：2018-08-29 16:00:31
【问题描述】：

我想确保我网站中的图像具有响应性，并在窗口尺寸减小时保持相同的高度。我有一个媒体查询，在较小的屏幕上将布局更改为 1 列而不是 2 列，但在大屏幕上，图像高度不一样。我已将所有图像放入 div 并限制了这些 div 的大小，但我所做的一切似乎都没有改变图像高度，以便它们保持响应。我尝试过使用 object-fit 和 flexbox，但似乎没有任何效果。

网站在这里：https://giagnus64.github.io/mineight-site/

【问题讨论】：

你可以把它们放在一个容器中，给容器一个高度，然后将你的img标签设置为高度：100%。或者，您可能对Flexbox 感兴趣编辑：刚刚看到您尝试了 flexbox，但会将链接留给其他人

标签： html css responsive-design responsive-images

【解决方案1】：

如果您修改了 HTML 并使用背景图像而不是内联图像，则可以使用现有图像来实现。

不过，更简单的解决方案就是让您的所有图像尺寸完全相同。它们中的大多数是 690px 宽 x 460px 高，所以如果你调整和裁剪那些让你很难达到 690px x 460px 的尺寸，一切都会很好。

除了调整大小之外，您还可以将图像裁剪为等效的 690:460 纵横比。如果图像仍然足够宽以覆盖每个视口的 .feature-box div，这将起作用。

祝你好运！

【讨论】：