css - CSS sprite 缩放到 div 尺寸

Question

我想知道是否有办法将精灵图像缩放到包含 div 的尺寸例如，如果我有一个包含 10 帧（每个 100x100 像素，使其为 1000x100）的精灵图像，并且包含 div 的宽度例如为 200px 或50px，有没有办法让框架在 div 中正确显示？background-size 可以在那里做任何事情吗？谢谢

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 school 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 )