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

Question

一段时间以来一直在研究网格，试图弄清楚这是否可行，但运气不佳。

我在一个网站上工作，其中所有内容都安排在 12 像素正方形的严格背景网格内，该网格也用作基本字体大小，因此 1rem = 12px。为了保持垂直节奏，我需要确保所有元素(包括内边距、边距和边框)的宽度和高度都是该基本网格大小的倍数。

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

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

假设我有一个 <img>原始大小为 100px x 100px。是否可以将其限制为 96px (8rem) 或 108px (9rem)，或者将其放置在更大的容器中并对容器实现限制？ grid-auto-rows: 1rem似乎没有完成这项工作(因为该元素只创建了 1 个隐式轨道)，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;
  }
}