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

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

举个例子:

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

．.． 将使图像尽可能宽高，保持纵横比，但不宽或高于视口的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%);

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

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

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

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

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

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

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

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

使用JQuery，因为CSS是一个普遍的误解(这里关于简单设计目标的无数问题和讨论表明了这一点)。

用CSS做你想做的事情是不可能的:图像的宽度应该是100%，但如果这个宽度导致高度太大，max-height应该应用-当然正确的比例应该被保留。

我不是想翻旧账，但是…

#container img {
      max-width:100%;
      height:auto !important;
}

即使这是不合适的，因为你使用!重要的覆盖高度，如果你使用CMS，如WordPress，为你设置高度和宽度，这工作得很好。