css实现高度height随宽度width变化保持比例不变

最新推荐文章于 2025-07-29 15:28:11 发布

weixin_34220179

最新推荐文章于 2025-07-29 15:28:11 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b3c60bcf265da0f563db340

本文介绍两种利用CSS实现元素高度与宽度保持固定比例的方法：一种是通过padding-bottom百分比结合高度为0的方式；另一种是利用视口单位vw和vh。这两种方法能够确保在不同屏幕尺寸下元素的比例一致。

方法一：padding

  width: 50%;
  height: 0;
  padding-bottom: 25%;
复制代码

一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。

使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果，将 padding-bottom 设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

方法二：vw,vh

  width: 50vw;
  height: 25vw;
复制代码

根据CSS3规范,视口单位主要包括以下4个:

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

用视口单位度量，视口宽度为100vw，高度为100vh。

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css">
<style>
body{
    display: flex;
    flex-direction:column;
    align-items: center;
}
.box1 {
  width: 50%;
  height: 0;
  padding-bottom: 25%;
  background: #f44336;
}
 
.box2 {
  width: 50vw;
  height: 25vw;
  background: #2196f3;
}
</style>  
</head>
<body>
    <div class="box1"></div>    <!--padding-->
    <div class="box2"></div>    <!--vw,vh-->
</div>
</body>
</html>

复制代码