背景图像CSS的最大大小

这是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

如果使用不支持垂直对齐的浏览器,则可以将图像绝对定位在50%的位置,并使用JavaScript将上边距设置为(宽度*-0.5)。这将使图像的中间与父元素的中间对齐,这与垂直中心对齐相同。

用CSS做这些并不难

• 首先,请看一下 the Mozilla Specs 对于混合机组 background-size .
• 第二,请考虑简单设置 background-size: contain; (IE9+、Safari 4.1+、FF 3.0+、Opera 10+)和 min/max-width/height 对于容器元素。

使用CSS3的组合,您完全可以不用JavaScript来解决这个问题 background-size

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

请注意,IE8或更低版本都不支持这两种方法,因此,如果您仍然支持旧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 . 超过了这一点,它就达到了默认大小。在不支持媒体查询或背景大小的老浏览器中,它们将忽略选项并呈现背景图像的最大大小(默认大小)。