首页教程软件教程正文

css如何实现页面缩放时元素宽高比不变

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 249 浏览 2614 个字

摘要 :

文章目录一、利用padding-top保持宽高比（一）原理剖析（二）代码示例二、借助图片自适应撑开父级元素（一）原理讲解（二）代码示例在前端开发中，让页面元……

文
章
目
录

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

（一）原理剖析
（二）代码示例

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

（一）原理讲解
（二）代码示例

在前端开发中，让页面元素在缩放时保持特定宽高比是个常见需求。比如抖音页面，随着屏幕宽度变化，某些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;依旧是为了方便查看效果设置的背景色。

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

赏

微信扫一扫

支付宝扫一扫

版权：转载请注明出处：https://www.zuozi.net/6786.html