css 等比放大 |ng show css

在实现等比放大时，大家通常使用百分比来定义元素的宽度或高度，例如：

.box {
width: 100%;
height: 0;
padding-bottom: 75%; /* 按照4:3的比例设置高度为宽度的75% */
}

上面的代码将一个元素的宽度设置为100%，高度按照宽度的75%进行设置，从而实现了一个宽高比为4:3的元素。这样做的好处是，无论这个元素在什么尺寸的屏幕上显示，它的宽高比都不会发生变化。

除了使用百分比来实现等比放大外，大家还可以使用CSS中的calc()函数和min()/max()函数来实现更复杂的等比放大需求。

使用calc()函数可以在计算元素的宽度或高度时使用数学表达式，例如：

.box {
width: calc(100% - 20px); /* 宽度为父元素宽度减去20像素 */
height: calc(100vh - 100px); /* 高度为视口高度减去100像素 */
}

使用min()和max()函数可以在元素的宽度或高度超过或不足一定值时进行缩放或放大，例如：

.box {
height: min(300px, 30vw); /* 高度为300px或是视口宽度的30%中较小的那个 */
width: max(200px, 20vh); /* 宽度为200px或是视口高度的20%中较大的那个 */
}

以上只是等比放大技术的几种实现方式，实际应用中需要根据具体场景进行选择。总之，等比放大是一种非常实用的技术，可以让大家的网站在不同的设备和屏幕上表现出良好的适应性。