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

Question

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

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

Answer 1

我建议您使用 CSS 单元：vw 和 vh。

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

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

您可以通过以下示例对其进行测试：

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