以最小/最大高度/宽度显示图像，同时在 IE8 中保持纵横比

Question

我有一个个人资料图片网格，我在一个正好 100x150 的窗口中显示。

源图像的尺寸从 60x60 到 300x300 不等。 （有些太大，有些太小）

我在除 IE8+ 之外的所有浏览器中所做的工作是将 img 标签放在 div 中。

div 设置了精确的高度，隐藏了溢出，img 设置了最小/最大宽度和高度。

除 IE 之外的所有浏览器都会将宽度/高度更改为最小/最大级别而不更改纵横比； IE改变宽高比（独立改变宽度和高度）。

background-size:cover 因为 IE8 不支持而失效了。

想法？

Answer 1

我认为你需要这样的脚本： 设置图像宽度 = 父级宽度（溢出的 div）： 图像高度

有一些 jquery 插件可以做这些事情。它们被称为“背景图像插件”，类似的东西。但是自己写很容易。

看起来像我在代码中的话：How to resize images proportionally / keeping the aspect ratio?

Answer 2

而不是使用最小/最大宽度和高度；设置每个图像的宽度。当<img /> 标签中仅提供一个参数时，浏览器（包括 IE）将调整图像的大小以保持纵横比。像这样：

<div style="width: 100px; height: 150px;">
    <img src="#" style="width: 100px;" alt="#" />
</div>