视网膜图像未按比例缩小

Question

我正在使用 Bourbon.io (http://bourbon.io/docs/#retina-image) 为图片制作视网膜图像：

这是我的 html：

<div class='image'>some text that will get hidden</div>

和我的 CSS：

.image {
   @include retina-image(image, top left);
   height: 300px;
   width: 300px;
   background-repeat: no-repeat;
   text-indent: -31445px;
}

我有一个 image.png（即 300x300 像素）和一个 image_2x.png（600x600 像素）。现在，它显示的是视网膜图像，但它显示的是 600*600（所以它被截断了，你只能看到图像的左上角。我如何让它缩小以适应 300*300？

Answer 1

使用 background-size 属性:

.image {
    ...
    background-size: 300px;
    ...
}

MDN 规范 link here, and a demo example is here.

Retina image not scaling down