2

我正在编写一个包含 3 个宽图像的站点，这些图像始终需要 100% 的宽度。我正在使用媒体查询，我宁愿不必为每个图像制作 3 个以上的副本以使其适合。

这是我想要的图像上的 CSS：

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    
}

这是一个 jsFiddle 链接：http: //jsfiddle.net/RtPEA/。该链接仅包含<div>需要调整大小的背景的三个。

我background-size:cover;在很多网站上都使用过，但在 Firefox 中，它似乎不适用于这个网站。

我也尝试过各种 jQuery 插件。虽然我确实找到了一些成功的，但它们在 iOS 上不起作用。

4

1 回答 1

5

您需要background-size在前缀版本之后添加：

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

-moz-background-size仅在 Firefox 3.6 中受支持，并且不保证其他前缀版本会继续存在。

于 2012-12-05T11:09:03.367 回答