paint-brush
HTML:如何使用 CSS 容器查询调整图像大小!经过@briantreese
748 讀數
748 讀數

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

经过 Brian Treese6m2024/02/19
Read on Terminal Reader

太長; 讀書

在这篇文章中,我们将使用 HTML 和 CSS 制作一个看起来像图像的广告。我们将使其像图像一样被压缩、扩展并移动到文档中的其他位置。这里的第一步是提供一个容器来监控我们的维度。这将是我们的图形元素。
featured image - HTML:如何使用 CSS 容器查询调整图像大小!
Brian Treese HackerNoon profile picture

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


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


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


图片形式的广告示例



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


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


因此,我们的任务是将其转换为 HTML;我们应该怎么做?

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

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


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

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

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

转换为 HTML 和 CSS 的广告示例



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

HTML 和 CSS 添加损坏的示例



呃,文本和边框不会改变大小,所以它需要一些爱,因为它的现状相当糟糕。现在,我们已经在这里做的一件事是,我们使用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)); }


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


在大视口中以 HTML 和 CSS 容器查询形式投放广告



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


在较小视口中以 HTML 和 CSS 容器查询形式投放广告



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


在移动视口中将广告作为 HTML 和 CSS 容器查询



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


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


 <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> 


广告作为 HTML 和 CSS 容器查询移至主要内容区域



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

想看看它的实际效果吗?

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