我将此用于高度和宽度固定的矩形容器，但图像大小不同。

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

如果你只在一个图像上定义一个维度，图像的纵横比将始终保持。

问题是图像比你喜欢的更大/更高吗?

你可以把它放在一个DIV中，这个DIV被设置为你想要的图像的最大高度/宽度，然后设置overflow:hidden。那样会把你想要的东西都剪掉。

如果图像的宽度和高度都是100%，而你认为它太高了，这是因为保留了纵横比。您需要裁剪或更改纵横比。

请提供一些关于你具体想要完成的事情的更多信息，我会尽量帮助更多!

——根据反馈进行编辑——

你熟悉最大宽度和最大高度属性吗?你可以设置这些。如果你没有设置任何最小值，你设置了最大高度和宽度，那么你的图像将不会失真(纵横比将被保留)，它将不会比最长的维度大。

通过将CSS的max-width属性设置为100%，图像将填充它的父元素的宽度，但不会呈现比它的实际大小更大，从而保持分辨率。

将height属性设置为auto可以保持图像的纵横比，使用这种技术可以覆盖静态高度，并使图像能够在各个方向上按比例伸缩。

img {
    max-width: 100%;
    height: auto;      
}

几年后，在寻找同样的需求时，我发现了一个使用background-size的CSS选项。

它应该可以在现代浏览器(IE9+)中运行。

<div id="container" style="background-image:url(myimage.png)">
</div>

以及风格:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

参考资料:http://www.w3schools.com/cssref/css3_pr_background-size.asp

demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

简单优雅的工作解决方案:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

现在我们可以使用vw和vh单位，它们分别代表视口宽度和高度的1%。

https://css-tricks.com/fun-viewport-units/

举个例子:

img {
  max-width: 100vw;
  max-height: 100vh;
}

．.． 将使图像尽可能宽高，保持纵横比，但不宽或高于视口的100%。