仅使用HTML和CSS将图像(或任何元素)的高度限制为行高的倍数

Question

一段时间以来，我一直在与网格打交道，试图找出这是否有可能，而没有太多的运气。

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

对于像段落和标题这样的文本内容，这并不是非常困难的，只要所有的线条高度都设置为1 3rem、2 3rem、3 3rem等等。然而，对于图像，我很难看到如何在没有javascript的情况下将其强制到网格大小的倍数。

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

因此，假设我有一个原来大小为100 an乘100 an的<img>。是否可以将其限制为96 do (8 8rem)或108 do(9 8rem)，或者可能将其放置在更大的容器中并对容器强制执行限制？grid-auto-rows: 1rem似乎不做此工作(因为元素只创建了一个隐式跟踪)，grid-template-rows: repeat(auto-fill, 1rem)也不这样做。

Answer 1

您可以使用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;
  }
}