使用 <img> 实现雪碧图

雪碧图不局限于 `background-image`，借助 `object-fit` 和 `object-position` 属性，我们可以调整内联图像在其内容框中的位置，使其像雪碧图一样工作。 例如，假设我们希望将下面的图像像普通图像一样添加到 HTML 页面中

<img src='sprite.png' alt='Icons'> 

然后，我们将裁剪图像，以便屏幕上仅显示第一个图标

img {
  object-fit: none;
  object-position: 0 0;
  width: 100px;
  height: 100px;
}

这里，`<img>` 的内容框应为 100px 宽，100px 高，但由于图像超出这些边界，因此使用 `object-fit: none` 自动为我们裁剪。然后，我们可能希望使用一个类来调整图像位置，并完全显示其另一部分

.book {
  object-position: 0 -234px;
}

这些雪碧图可以是任何常规图像格式，但也可以使用相同的技术处理 SVG。以下是在 Chrome 最新稳定版本中目前可用的示例

查看 CodePen 上 Robin Rendle (@robinrendle) 编写的示例 使用 `object-position` 实现雪碧图。

图片滑块

使用少量 JavaScript，我们实际上可以使用相同的概念，通过单个 `<img>` 标签创建一个图片滑块。当点击图像时，只需更改一些类，这些类会更改 `object-position`。

查看 CodePen 上 Robin Rendle (@robinrendle) 编写的示例 使用 `object-position` 实现 SVG 雪碧图。

支持

请记住这一点以备将来使用，因为不幸的是，目前 `object-fit` 的浏览器支持情况并不理想。Safari 和 Firefox 的当前桌面版本不支持它，iOS 也不支持。因此，在短期内使用此技巧之前，请务必仔细检查 `object-fit` 的年鉴条目。