css实现宽高成比例的自适应盒子，且垂直居中

最新推荐文章于 2023-07-23 21:23:45 发布

不想写代码的代码媛

最新推荐文章于 2023-07-23 21:23:45 发布

阅读量495

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/Pebbles_/article/details/107993063

版权

【css】css实现宽高成比例的自适应盒子，且垂直居中

一个元素的 padding，如果值是一个百分比，那这个百分比是相对其父元素的宽度而言的，而不是高度，对于 padding-bottom 和 padding-top 也是相对宽度而言的。
在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。
所以，我们可以使用 padding-bottom 或padding-top来代替 height 来实现高度与宽度成比例的效果。

<style>
  .box{
    width: 60%;
    height: 0;
    /* padding-bottom: 30%; */
    padding-top: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgb(240, 134, 134);
  }
</style>
<body>
  <div class="box"></div>
</body>

不想写代码的代码媛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现宽高成比例的自适应盒子，且垂直居中

【css】css实现宽高成比例的自适应盒子，且垂直居中一个元素的 padding，如果值是一个百分比，那这个百分比是相对其父元素的宽度而言的，而不是高度，对于 padding-bottom 和 padding-top 也是相对宽度而言的。在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。所以，我们可以使用
复制链接

扫一扫