您知道在构建网站时什么比使用图像更酷吗？使用 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

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

太長; 讀書

Make resilience your competitive advantage

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Telegram：加密岛通往大陆的桥梁

扬帆起航：利用数据湖开发生产级 RAG 应用程序

成功云迁移的完整指南：策略和最佳实践

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

Telegram：加密岛通往大陆的桥梁

扬帆起航：利用数据湖开发生产级 RAG 应用程序

成功云迁移的完整指南：策略和最佳实践

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps