即使在放大和缩小后也保持图像大小相同
Keep Image Size the same even after zooming in and out
我有一个 mat-sidenav 组件，里面装满了 mat-card 个组件。在 sidenav 之外，我还有页面的其余部分。我想要的是让我的 sidenav 卡组件与某人放大和缩小页面时保持完全相同的大小。我已经说明了我的意思：
左边的图片是缩放前我的页面，右边是缩放后的。 sidenav 之外的内容（框）相应地缩放和缩放，我的 sidenav 本身有一个最大宽度设置，即使在缩放后它也不会超过（我已经实现了这个）。我的问题在于垫卡组件（表示为圆圈）。我希望我的垫子卡在缩放后也能保持与图像中看到的相同大小，但是，它们像我在 sidenav 之外的组件一样增长。我的垫子卡片也单独包装在 <a> 标签中。我需要它，好像放大和缩小根本不会影响 sidenav 或其内容，我该如何实现？
我建议您使用 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
我有一个 mat-sidenav 组件，里面装满了 mat-card 个组件。在 sidenav 之外，我还有页面的其余部分。我想要的是让我的 sidenav 卡组件与某人放大和缩小页面时保持完全相同的大小。我已经说明了我的意思：
左边的图片是缩放前我的页面，右边是缩放后的。 sidenav 之外的内容（框）相应地缩放和缩放，我的 sidenav 本身有一个最大宽度设置，即使在缩放后它也不会超过（我已经实现了这个）。我的问题在于垫卡组件（表示为圆圈）。我希望我的垫子卡在缩放后也能保持与图像中看到的相同大小，但是，它们像我在 sidenav 之外的组件一样增长。我的垫子卡片也单独包装在 <a> 标签中。我需要它，好像放大和缩小根本不会影响 sidenav 或其内容，我该如何实现？
我建议您使用 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