视网膜图像没有缩小

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规范链接here，演示示例为here。