其中一个答案包括background-size: contains css语句，我很喜欢这个语句，因为它直接说明了你想做什么，浏览器就会完成它。

不幸的是，迟早你会需要应用一个阴影，不幸的是，它不会很好地与背景图像解决方案。

假设你有一个响应性很强的容器，但是它对最小和最大宽度和高度有很好的定义。

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

容器有一个img，它必须知道容器高度的像素，以避免得到一个非常高的图像，溢出或裁剪。

img还应该定义一个max-width为100%，首先是为了允许更小的宽度被渲染，其次是基于百分比的，这使得它成为参数。

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

注意，它有一个漂亮的阴影;)

享受一个活生生的例子在这小提琴:http://jsfiddle.net/pligor/gx8qthqL/2/

我想这就是你要找的东西，我自己也在找，但在我找到密码之前我又想起来了。

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

数字进化正在进行中。

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

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

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

width: 100%;
height: auto;

也有同样的问题。对我来说，问题是高度属性也已经在其他地方定义，像这样固定它:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

这是一个非常直接的解决方案，我提出后，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); />