如何使用 CSS 函数而不是媒体查询来选择两种图像尺寸之一？

Question

我有以下 CSS，它会生成一个横向滚动的图片库，其中一张图片适合屏幕宽度，视口最大为 500 像素，两张以上。我如何重写它以使用 CSS 函数而不是媒体查询？我查看了 min(), max(), and clamp() 的 MDN 文档，除了指定的示例之外，如何做任何事情真的很令人困惑，这些示例本身也很令人困惑。（“将 min() 值视为提供属性可以拥有的最大值。”）

@media (min-width: 501px) {
  img { width: 48vw; }
}

@media (max-width: 500px) {
  img { width: 96vw; }
}

body { margin: 0; }

ul {
  margin: 2vw;
  padding: 0;
  display: flex;
  overflow-x: scroll;
  list-style-type: none;
}

<ul>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
</ul>

Answer 1

您可以像下面这样操作：

body { margin: 0; }

ul {
  margin: 2vw;
  padding: 0;
  display: flex;
  overflow-x: scroll;
  list-style-type: none;
}

img {
  width:clamp(48vw,calc(100vw - 500px)*-999,96vw);
}

<ul>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
</ul>

有关更多详细信息，请查看我的文章：https://css-tricks.com/responsive-layouts-fewer-media-queries/ 在那里您会发现很多没有媒体查询的技巧，包括上面的

您也可以按照以下方式进行操作：

body { margin: 0; }

ul {
  margin: 2vw;
  padding: 0;
  display: grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(50%,calc(100vw - 500px)*-999,100%);
  overflow-x: scroll;
  list-style-type: none;
}

img {
  max-width:100%;
}

<ul>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
  <li><img src=http://placekitten.com/1280/960>
</ul>

如何使用 CSS 函数而不是媒体查询来选择两种图像尺寸之一？

How can I pick one of two image sizes using CSS functions, not media queries?

css

media-queries