我有一个 70 x 50 像素的盒子，我有各种图像，（SVG 文件，所以没有大小）我想保持它们的纵横比，但有些图像是纵向的，有些是横向大小的。所以我可以这样做：
background-size: 70px auto;
这将适用于所有横向图标。但它会拉伸肖像图像并使其更高，因此它们仍将具有正确的纵横比，但顶部和底部将被切断。
是否有某种背景最大尺寸？
（或者，我使用背景图像的唯一原因是因为您可以将图像居中对齐，水平和垂直，因此另一种方法是找到如何在li 元素。）
【问题讨论】：
我对这个问题有点晚了（10 年），所以以前的答案对我来说不够好
我们有一个名为 clamp 的 css 函数，它可以用最小值和最大值定义尺寸：clamp(<min-size>, <expected-size>, <max-size>)
width: clamp(100px, 10vw, 500px);
是的，我的朋友，你也可以将它用于background-size。
background-size: clamp(1000px, 80%, 1500px) auto;
*IE 支持一如既往地值得怀疑。
【讨论】：
使用 CSS3 background-size 和媒体查询的组合，您完全可以在不使用 JavaScript 的情况下解决这个问题。例如：
@media only screen and (max-width: 1000px) {
#element {
background-size: contain;
}
}
请注意，IE8 或更低版本均不支持，因此如果您仍支持旧 IE，则应包括旧 IE 的后备。
【讨论】：
这个问题的答案有点过时了。正如stringman5 所提到的，IE8 或更低版本都不支持任何 CSS 选项。如果没有必要，让 jQuery 处理您的背景图像也不是最佳选择。为了在不使用 JavaScript 的情况下使用包含旧浏览器回退的选项，您可以执行以下操作：
#myElement {
background: #FFFFFF url('mybackground.jpg') no-repeat right top;
}
@media only screen and (max-width: 1024px){
#myElement {
background-size: 50%;
}
}
请注意，我在媒体查询中使用了max-width，这意味着background-size: 50%; 将一直应用到1024px。除此之外，它确实是默认大小。在不支持媒体查询或背景尺寸的旧浏览器中，它们将忽略这些选项并呈现背景图像的最大尺寸（默认尺寸）。
【讨论】：
@supports，所以这可能会有意想不到的行为。
用 CSS 做到这一点并不难
background-size 的混合单位。 background-size: contain;（IE9+、Safari 4.1+、FF 3.0+、Opera 10+）和min/max-width/height。【讨论】：
background-size: 100% 用于我的用例，然后我只是告诉我应用background-image 的元素在我最大的breakpoint 上有一个max-size。像魅力一样工作。
这是 CSS 无法自行解决的问题。有一些 JavaScript 库可以完成这项工作。如果你使用jQuery，你可以找到一个插件或者滚动你自己的函数。
获取图像的width 和height，并计算比率（x/y）。如果比率大于 70/50 (1.4)，则将宽度设置为 70px，将高度设置为 (70 * x/y)。如果比率小于 70/50 (1.4)，请将高度设置为 50px，宽度设置为 (50 * x/y)。
如果您使用不支持垂直对齐的浏览器，您可以将图像绝对定位在 50%，并使用 JavaScript 将上边距设置为 (width * -0.5)。这将使图像的中间与父元素的中间对齐，这与垂直居中对齐相同。
【讨论】：