视网膜问题和 CSS 背景图片

Question

我正在开发一个网站，所有者希望在发布前保持私有。

楼主在OSX，我在Windows。

在 Windows 上，网站看起来不错，如下所示：

注意带有动物的蓝色横幅 - 动物完整显示，此横幅由 CSS:

制作

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

从另一个问答中，我发现一些 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 is twice the height and width of images/mesopotamia_shadow.jpg (552 x 78) click here for the image。这是否正确？

CSS 正确吗？

Answer 1

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

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

<div></div>

Codepen
或者，在您的代码中：

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

在上面的演示中，图像尽可能 space 填充，不需要 @media 查询。

Answer 2

您也可以试试：

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

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

视网膜问题和 CSS 背景图片

Trouble with Retina & CSS background image

css

retina-display