您知道在构建网站时什么比使用图像更酷吗？使用 HTML 和 CSS 制作一些看起来和行为都像图像的东西怎么样？你知道吗，现在使用容器查询变得非常简单。在这篇文章中，我们将使用 HTML 和 CSS 制作一个看起来像图像的广告。 然后，我们将使其像图像一样被压缩、扩展并移动到文档中的其他位置。好吧，我们来看看吧！   https://youtu.be/5ugwp7HlpGs?embedable=true 好的，我们正在构建的网站的侧边栏中有这个 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 在这里，我们将使用  ，我相信它代表容器内联查询。 1  单位等于容器宽度的百分之一。好的，这就是我们所需要的；从这里开始，我们只是根据需要设置单位。 cqi cqi 在这里，我们有几个自定义属性用于此广告中的多个元素。   figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; } 让我们从该框架从容器外边缘插入的量开始。让我们把它设为三个  。 cqi   figure { ... --frameInset: 3cqi; } 接下来，我们在这里设置边框的粗细。在本例中，我将使用 函数来防止边框不断缩小到一个像素以下，但我希望它们是动态的，只要它们大于该一像素值即可。 max 因此，第一个值是一个像素，第二个值是动态值。让我们把它变成一个  。 cqi   figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; } 现在，对于 元素，即主标题“Vans”文本，让我们将其设为 25   。并且，对于标题下方的空间，我们将其设为 3   。 strong cqi 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 那么，我们就用上面的两个 吧。并且，在我们的计算中，我们将保留 不变，但我们将使用 5 个 的额外空间。 cqi --frameInset 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 示例中查看演示代码和这些技术的示例。如果您有任何问题或想法，请随时发表评论。   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

数字游民请注意：您需要了解泰国新推出的 DTV 签证

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

数字游民请注意：您需要了解泰国新推出的 DTV 签证

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps