背景图像CSS的最大尺寸

Question

我有一个70 x 50像素的盒子,我有各种图像,(SVG文件,所以没有大小)我想保持他们的宽高比,但有些图像是肖像,有些是景观大小.所以我可以这样做:

background-size: 70px auto;

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

有某种背景 - 最大尺寸？

(或者,我使用背景图像的唯一原因是因为您可以在水平和垂直方向上居中对齐图像,因此可以选择如何在li元素中垂直对齐img元素.)

Answer 1

使用CSS并不是那么难

• 1,请查看Mozilla Specs for mixed units for background-size.
• 2,请考虑简单设置background-size: contain;(IE9 +,Safari 4.1 +,FF 3.0 +,Opera 10+)和min/max-width/height容器元素.

Answer 2

使用CSS3 背景大小和媒体查询的组合,无需JavaScript即可完全解决此问题.例如:

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

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

Answer 3

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

抓取图像的宽度和高度,并计算比率(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

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