CSS精灵缩放到div维度

Question

我想知道是否有办法将精灵图像缩放到包含div的尺寸 例如，如果我有一个10帧的精灵图像（每个100x100像素，使其为1000x100） 并且包含div例如宽度为200px或50px，是否有一种方法可以在div中正确显示帧？ 背景大小可以在那里做吗？ 感谢

Answer 1

您使用的是CSS3吗？因此，您可以执行以下操作

（HTML）

<div class='your-box'></div>

（CSS）

.your-box {
  background-image: url(.);
  background-repeat: no-repeat;
  background-size: contain;
}

你可以在这里测试一下，http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain（w3学校ftw）

此外，我在我的书签http://caniuse.com/background-img-opts中也有这个，这让我可以看到哪种浏览器有效。

如果您希望它居中，您可以添加到CSS

      position: absolute;
      height: 100%;
      width: 100%;
      background-position: center;

但正如我所说，这适用于CSS3，但仍然大多数人使用IE8（IE9 +支持css），但正如我之前所说，看看哪些浏览器再次与CSS3链接兼容（http://caniuse.com/background-img-opts）< / p>