目前，使用STYLE，我可以使用width: 100%和auto on height(反之亦然)，但我仍然不能将图像约束到特定的位置，要么太宽，要么太高，分别。
什么好主意吗?
当前回答
我想这就是你要找的东西，我自己也在找，但在我找到密码之前我又想起来了。
background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;
数字进化正在进行中。
其他回答
几年后，在寻找同样的需求时，我发现了一个使用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
现在我们可以使用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); />
简单优雅的工作解决方案:
img {
width: 600px; /*width of parent container*/
height: 350px; /*height of parent container*/
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
最好在应该尊重纵横比的尺寸上使用auto。如果你没有将另一个属性设置为auto，现在大多数浏览器会假设你想要尊重纵横比例，但不是所有的浏览器都这样(例如，windows phone 8上的IE10就不这样)。
width: 100%;
height: auto;
