视网膜问题＆amp; CSS背景图片

Question

我正在开发一个所有者想要私有的网站，直到发布。

所有者在OSX上，我在Windows上。

在Windows上，该网站看起来很好，如下所示：

请注意带动物的蓝色横幅 - 动物全部显示，此横幅由CSS生成：

.ribbon-container {
    height: 78px;
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x;
}

从另一个Q＆amp; A中，我发现了一些CSS可能解决了所有者在OSX上遇到的问题。在她的计算机上，蓝色横幅没有正确显示。它看起来像这样：

它由CSS生成：

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
    .ribbon-container {
        height: 78px;
        background-size: 552px 78px;
        background: url('images/mesopotamia_shadow-x2.jpg') center bottom repeat-x;
    }
}

请注意，显示的图像大于Windows。 images/mesopotamia_shadow-x2.jpg（1104 x 156）click here for the image是images/mesopotamia_shadow.jpg（552 x 78）click here for the image的高度和宽度的两倍。这是否正确？

CSS是否正确？

Answer 1

您也可以尝试：

.ribbon-container {
    height: 78px;
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x;
    background-size:contain;
}

哪个应该使图像适合它的容器。

Answer 2

你的问题有点模糊，但我假设你问的是如何让背景图像填充div，而不是被切断。您可以通过更改背景大小background-size:auto 100%;：

来实现

＆＃13;

＆＃13;

div{
    height:200px;
    background:url(http://i112.photobucket.com/albums/n180/SRD001/screenshots/mesopotamia_shadow.jpg);
    background-size:auto 100%;
    resize:both;
    overflow:hidden;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Codepen
或者，在您的代码中：

.ribbon-container {
    height: 78px;
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x;
    background-size:auto 100%;
}

在上面的演示中，图片填充的空间尽可能多，不需要@media个查询。