在前端开发中，让页面元素在缩放时保持特定宽高比是个常见需求。比如抖音页面，随着屏幕宽度变化，某些div元素始终能维持高度是宽度75%的比例。这篇文章就来分享实现这一效果的两种方法，我们一起看下！

一、利用padding-top保持宽高比

在CSS布局里，有一种巧妙的方法可以实现元素宽高比固定。以抖音页面为例，我们发现其部分元素高度始终是宽度的75% ，这里用到的关键CSS属性就是padding-top。

（一）原理剖析

当给元素设置padding-top为百分比值时，这个百分比是相对于父元素的宽度来计算的。也就是说，我们设置padding-top: 75%;，元素的高度就会始终保持为父元素内容宽度的75% ，这样就达到了在页面缩放时保持宽高比的效果。

（二）代码示例

下面这段HTML和CSS代码展示了如何运用这一技巧：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./test.css"> <style> * { box-sizing: border-box; } .container { display: flex; flex-wrap: wrap; } .wrapper { width: 45%; border: 1px solid; padding: 20px 30px; } .inner { width: 100%; background-color: greenyellow; padding-top: 75%; } </style> </head> <body> <div class="container"> <div class="wrapper"> <div class="inner"></div> <p>描述文字</p> </div> <div class="wrapper"> <div class="inner"></div> <p>描述文字</p> </div> <div class="wrapper"> <div class="inner"></div> <p>描述文字</p> </div> <div class="wrapper"> <div class="inner"></div> <p>描述文字</p> </div> </div> </body> </html>

在这段代码里，wrapper类定义了元素的基本样式，包括宽度、边框和内边距。而inner类则是关键，通过设置width: 100%;让它充满父元素wrapper的宽度，再设置padding-top: 75%;，就实现了高度始终是宽度75%的效果。background-color: greenyellow;只是为了方便查看效果添加的背景色。

二、借助图片自适应撑开父级元素

除了用padding-top，还有一种思路是利用图片的自适应特性来撑开父级元素，从而实现宽高比固定。

（一）原理讲解

图片在HTML页面中，如果设置width: 100%;，它会根据父元素的宽度自动调整大小，并且保持自身的宽高比。我们可以利用这一特性，让图片在父元素内自适应，进而撑开父元素，达到固定父元素宽高比的目的。

（二）代码示例

下面是实现该效果的代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./test.css"> <style> * { box-sizing: border-box; } .container { display: flex; flex-wrap: wrap; } .wrapper { width: 45%; border: 1px solid; padding: 20px 30px; } .inner { width: 100%; background-color: greenyellow; /* padding-top: 75%; */ } img { width: 100%; } </style> </head> <body> <div class="container"> <div class="wrapper"> <div class="inner"> <img src="./1.jpeg" alt=""> </div> <p>描述文字</p> </div> <div class="wrapper"> <div class="inner"> <img src="./1.jpeg" alt=""> </div> <p>描述文字</p> </div> <div class="wrapper"> <div class="inner"> <img src="./1.jpeg" alt=""> </div> <p>描述文字</p> </div> <div class="wrapper"> <div class="inner"> <img src="./1.jpeg" alt=""> </div> <p>描述文字</p> </div> </div> </body> </html>

这段代码和前面类似，不同之处在于inner类中移除了padding-top: 75%;，而是在inner元素内部添加了<img>标签，并设置img { width: 100%; }。这样，图片会根据父元素inner的宽度自适应，从而撑开inner元素，让inner元素的宽高比和图片保持一致。background-color: greenyellow;依旧是为了方便查看效果设置的背景色。

通过这两种方法，在前端开发中实现页面缩放时元素宽高比不变就变得轻松多了。大家可以根据实际项目需求选择合适的方法。要是在实践过程中有任何问题，欢迎在评论区留言讨论，咱们一起进步！