Question

我有一个70 x 50像素的盒子，我有各种图像，（SVG文件，所以没有大小）我想保持它们的宽高比，但有些图像是肖像，有些是横向大小。所以我可以这样做：

background-size: 70px auto;

这适用于所有风景图标。但它会拉伸肖像图像并使它们更高，因此它们仍然具有正确的宽高比，但顶部和底部将被切断。

是否有某种background-max-size？

（或者，我使用背景图像的唯一原因是因为你可以居中对齐图像，水平和垂直，所以另一种方法是找到如何垂直对齐img元素li元素。）

Answer 1

使用CSS

并不是那么难

1，请查看the Mozilla Specs background-size的混合单位。
第二，请考虑为容器元素设置background-size: contain;（IE9 +，Safari 4.1 +，FF 3.0 +，Opera 10+）和min/max-width/height。

Answer 2

使用CSS3 background-size和媒体查询的组合，无需JavaScript即可完全解决此问题。 e.g：

@media only screen and (max-width: 1000px) {
    #element {
        background-size: contain;
    }
}

请注意，IE8或更低版本都不支持，因此如果您仍支持旧IE，则应包括后备。

Answer 3

这是CSS无法自行解决的问题。有一些JavaScript库可以完成这项工作。如果您使用jQuery，则可以找到插件或滚动自己的功能。

抓取图片的width和height，然后计算比率（x / y）。如果比率大于70/50（1.4），则将宽度设置为70px，将高度设置为（70 * x / y）。如果比率小于70/50（1.4），则将高度设置为50px，将宽度设置为（50 * x / y）。

另见CSS vertical-align

如果使用不支持vertical-align的浏览器，则可以将图像绝对定位为50％，并使用JavaScript将上边距设置为（width * -0.5）。这将使图像的中间与父元素的中间对齐，这与垂直中心对齐相同。

Answer 4

这个问题的答案有点过时了。正如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。除此之外，它确实是默认大小。在不支持媒体查询或背景大小的旧版浏览器中，它们将忽略这些选项并渲染背景图像的最大大小（默认大小）。

Answer 5

我对这个问题有点晚（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 支持一如既往地存在问题。

背景图像CSS的最大尺寸

5 个答案: