css - 即使在放大和缩小后也保持图像大小相同

Question

我有一个 mat-sidenav组件填充 mat-card成分。在 sidenav 之外，我还有页面的其余部分。我想要的是让我的 sidenav 卡组件与某人放大和缩小页面时保持完全相同的大小。我已经说明了我的意思:

左图是缩放前的页面，右图是缩放后的页面。 sidenav 之外的内容(框)相应地缩放和缩放，我的 sidenav 本身有一个最大宽度设置，即使在缩放后它也不会超过(我已经实现了这个)。我的问题在于垫卡组件(表示为圆圈)。我希望我的垫子卡在缩放后也能保持与图像中看到的相同大小，但是，它们像我在 sidenav 之外的组件一样增长。我的垫子卡片也单独包装在 <a> 中标签。我需要它，好像放大和缩小根本不会影响 sidenav 或其内容，我该如何实现？

Answer 1

我建议您使用 CSS 单位:vw 和 vh。

vw=1 是相对于视口(viewport)宽度的 1%，而 vw=100 是 100%。vh=1是相对于视口(viewport)高度的1%，而vh=100是100%。

大小将始终根据您所看到的大小进行调整。因此，即使您放大或缩小，视口(viewport)也将保持不变，因此组件的大小也不会改变。

您可以在这些示例中对其进行测试:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh