HTML：如何使用 CSS 容器查询调整图像大小！

您知道在构建网站时什么比使用图像更酷吗？使用 HTML 和 CSS 制作一些看起来和行为都像图像的东西怎么样？你知道吗，现在使用容器查询变得非常简单。在这篇文章中，我们将使用 HTML 和 CSS 制作一个看起来像图像的广告。

然后，我们将使其像图像一样被压缩、扩展并移动到文档中的其他位置。好吧，我们来看看吧！

好的，我们正在构建的网站的侧边栏中有这个 Vans 广告，它目前是一个图像。

这使得编辑变得困难；如果需要更改，设计师需要对其进行更新并为我们提供新的图像。

此外，我们可能需要多个版本来与源集一起使用，以便它在高密度和低分辨率显示器上看起来清晰。

因此，我们的任务是将其转换为 HTML；我们应该怎么做？

使用图像和视口单位的一些缺点

好吧，我们可能可以使用视口单位，但如果我们要将广告放置在尺寸不同的不同位置，则需要添加额外的代码，因为所有内容都将基于视口而不是容器尺寸。

所以，我们可以成功，但可能会变得有点混乱。相反，我们可以使用容器查询和容器查询单元。容器查询有点像媒体查询，但基于页面中任何给定容器的尺寸而不是整个视口。

使用 CSS container-type属性设置容器

好的，让我们看看我们从什么开始。

所以，它看起来不错，但是它的响应如何呢？

呃，文本和边框不会改变大小，所以它需要一些爱，因为它的现状相当糟糕。现在，我们已经在这里做的一件事是，我们使用aspect-ratio ，它允许容器像图像一样响应，这很好。

 figure { aspect-ratio: 1 / 1.5; }

我们只需要更改内容的所有尺寸即可使其正确响应。这里的第一步是提供一个容器来监控我们的维度。这将是我们的图形元素。

要在这里使用容器查询，我们需要定义所谓的包含上下文。我们可以使用container-type属性来做到这一点。对于此示例，我们可以使用内联大小的值。

 figure { ... container-type: inline-size; }

这将设置一个容器，该容器将根据其内联尺寸来调整事物的大小，在本例中，该内联尺寸将是图形的宽度。好的，现在我们有了一个要监视的容器，因此我们现在可以自由地使用容器查询单元。而且，有很多可供选择。我们可以使用以下任何单位值：

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

在这里，我们将使用cqi ，我相信它代表容器内联查询。 1 cqi单位等于容器宽度的百分之一。好的，这就是我们所需要的；从这里开始，我们只是根据需要设置单位。

在这里，我们有几个自定义属性用于此广告中的多个元素。

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

让我们从该框架从容器外边缘插入的量开始。让我们把它设为三个cqi 。

 figure { ... --frameInset: 3cqi; }

接下来，我们在这里设置边框的粗细。在本例中，我将使用max函数来防止边框不断缩小到一个像素以下，但我希望它们是动态的，只要它们大于该一像素值即可。

因此，第一个值是一个像素，第二个值是动态值。让我们把它变成一个cqi 。

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

现在，对于strong元素，即主标题“Vans”文本，让我们将其设为 25 cqi 。并且，对于标题下方的空间，我们将其设为 3 cqi 。

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

现在，让我们转到“Off the Wall”副标题。它应该大约是主标题大小的一半，所以让我们尝试 12 个cqi 。并且，对于文本上方的空间，我们再次使用三个cqi 。

 em { font-size: 12cqi; padding-top: 3cqi; }

好吧，对于最后一个“Since 1966”标签，我们使用 6 cqi的字体大小。并且，对于上方和下方的空间，我们使用padding-block的逻辑属性，该属性最多占用两个值。第一个值是文本上方的值，第二个值是下方空间的值。

那么，我们就用上面的两个cqi吧。并且，在我们的计算中，我们将保留--frameInset不变，但我们将使用 5 个cqi的额外空间。

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

好吧，酷，这看起来不错。

我们来看看它是如何回应的。当我们挤压它时，一切都会像我们想要的那样正确、一致地响应。它看起来很像图像。

即使它很小，它看起来也相当不错，并且您可以看到边框永远不会缩小到一个像素以下。然后，当我们进入非常窄的宽度时，它会变得更宽，并且一切看起来仍然很棒。

这有多酷？一套风格，自始至终都有效。当我们来回缩放它时，它看起来很棒。

现在，更酷的是，我们可以将广告标记移至此处的主栏区域，然后一切都会继续工作，就像它是图像一样。

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

这真是太好了，太酷了。请记住，只有一组样式可以实现所有这些。并且，涉及零媒体查询。容器查询作为一个整体还有很多内容，所以请留意我将来介绍不同方面的帖子。

想看看它的实际效果吗？

在下面的 Codepen 示例中查看演示代码和这些技术的示例。如果您有任何问题或想法，请随时发表评论。