Question

迷恋网格一段时间，试图找出运气不好的可能性。

我正在一个网站上，所有内容都安排在12px正方形的严格背景网格内，该网格也用作基本字体大小，因此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;
  }
}

仅使用HTML和CSS将图片（或任何元素）的高度限制为行高的倍数

1 个答案: