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

边界框约为 1000x600，部分图像为 500x100， 而其他一些是 400x100（极端的例子）。现在我想 将两者缩放到边界框能够达到的最大尺寸 处理，但保持它们的规模。

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

不会保持图像的比例。

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

img {
    width: 100%;
}

or

img {
    height: 100%;
}

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

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