视网膜图像未缩小

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;
}

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

Answer 1

使用 background-size 属性：

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

MDN 规范链接在这里，演示示例在这里。