css - 使用 css 将图像缩放到宽度和高度以进行缩放

Question

边界框大约为 1000x600，有些图像为 500x100，而其他一些是 400x100(极端示例)。现在我想将两者都缩放到边界框能够达到的最大尺寸处理，但要保持规模化。

img {
  width: 100%;
  height: 100%;
}

不会使图像按比例缩放。

Answer 1

您可以将宽度或高度设置为 100%。例如

img {
    width: 100%;
}

或

img {
    height: 100%;
}

这将保留图像比例，但图像可能会溢出容器。

这可能不适用于所有浏览器，但它适用于最新版本的 Firefox、Chrome 和 Opera。我过去对此有过奇怪的经历，我的解决方案是计算服务器上的新图像大小。