Html 在CSS中显示十个图标的图像中的一个图标，这些图标也必须缩放？

在CSS中，如果我有一个10个图标的单个文件，每个图标100x100像素。它是

icons.png

我想在我的html图像

<img alt="The third image in the file, but scaled to 30x30"> &nbsp; Menu

菜单

但是，我希望文件中的第三个图像（位置[200,0]和宽度100x100）但是整个100x100图标缩放到30x30像素

---

这可以在CSS/HTML中完成，而不使用任何javascript吗？

您可以使用：nth-child（）选择器选择父div的第三个子项

HTML

<div>
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu 
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu 
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu 
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu
  <img src="https://via.placeholder.com/100x100"> &nbsp; Menu
</div>

---

.

您正在描述CSS精灵，请检查此项：。。这可能就是你所需要的

div img {
  width: 100px;
  height: 100px;
}
div img:nth-child(3) {
  width: 30px;
  height: 30px;
}