限制图像'；s（或任何元素'；s）高度为行高的倍数，仅使用HTML和CSS

有一段时间，我一直在和grid打交道，试图弄清楚如果运气不好的话，这是否可能实现

我在一个网站上工作，在这个网站上，所有东西都被安排在一个严格的背景网格中，这个网格是12px正方形，也被用作基本字体大小，所以1rem=12px。为了保持垂直节奏，我需要确保所有元素（包括填充、边距和边框）的宽度和高度都是基本网格大小的倍数

对于像段落和标题这样的文本内容，这并不特别困难，只要行高度都设置为1rem、2rem、3rem等。但是对于图像，我很难看到如何在不使用javascript的情况下将其强制为网格大小的倍数

并不是说我不能使用javascript，而是我真的不想

---

假设我有一个原始大小为100px乘以100px的

。是否可以将其限制为96px（8rem）或108px（9rem），或者将其放置在一个更大的容器中，并对容器实施限制

grid auto rows:1rem

似乎不起作用（因为元素只创建一个隐式轨迹），而且

grid template rows:repeat（auto fill，1rem）

您可以使用css@media查询在特定断点处为图像指定大小

@media only screen and (max-width: 640px) {
  img {
    height: 6rem;
  }
}
@media only screen and (min-width: 641px) and (max-width: 800px) {
  img {
    height: 7rem;
  }
}
@media only screen and (min-width: 801px) and (max-width: 960px) {
  img {
    height: 8rem;
  }
}
@media only screen and (min-width: 961px) and (max-width: 1024px) {
  img {
    height: 9rem;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  img {
    height: 10rem;
  }
}
@media only screen and (min-width: 1201px) {
  img {
    height: 11rem;
  }
}