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

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

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

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

举个例子:

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

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

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

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

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

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

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

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

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

这是一个非常直接的解决方案，我提出后，conca的链接，并查看背景大小。它将图像放大，然后将其置于外部容器中，不缩放。

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

简单的解决方案:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

顺便说一下，如果你想把它放在父div容器的居中，你可以添加这些css属性:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

它应该真的像预期的那样工作:)

最好在应该尊重纵横比的尺寸上使用auto。如果你没有将另一个属性设置为auto，现在大多数浏览器会假设你想要尊重纵横比例，但不是所有的浏览器都这样(例如，windows phone 8上的IE10就不这样)。

width: 100%;
height: auto;