强制css以比例方面显示图像

Question

imax是一个div元素。

#imax {
width:222px;
height:222px;
}
#imax img {
width:222px;
height:auto;
}

如果我在宽度或高度上尝试自动两种方式，不同方向的图像将导致任一比例的扭曲。我怎么能修复比例方面的显示？

Answer 1

忽略高度：

#imax img {
  width:222px;
}

浏览器将负责计算宽高比。

Answer 2

由于您对其父级进行了限制，因此图像会失真。如果只指定其中一个尺寸属性，则另一个应根据比例进行缩放 - 除非它受到容器的限制/影响。如果您在容器上使用max-height / width

，可能会有不同的工作方式

Answer 3

仅限CSS无法完成。

您可以使用Javascript执行此操作：获取全尺寸图像的高度或宽度，然后计算正确的较小尺寸。