css实现固定宽高比例的div

最新推荐文章于 2024-02-04 17:36:41 发布

MMMMQI

最新推荐文章于 2024-02-04 17:36:41 发布

阅读量3.2k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_30156795/article/details/116129093

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种使用CSS创建固定宽高比例div的方法。一是利用padding百分比，通过设置padding-top或padding-bottom来达成；二是使用新的CSS属性`aspect-ratio`，规定元素的宽高比。需要注意`aspect-ratio`属性在某些浏览器中可能不被支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用padding实现

这个方法的原理是，padding和margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。

利用这个原理，可以通过设置padding-top / padding-bottom的百分比值，获得固定宽高比例的元素。

固定宽高的元素是画出来了，但是具体使用的时候还要往里面添加子元素，需要让子元素绝对定位，占满空间。

使用的例子如下

<style>
  .wrap {
    width: 200px;
  }

  .box {
    background-color: orange;
    padding-top: 50%;
    position: relative;
  }

  .content {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
<div class="wrap">
  <div class="box">
    <div class="content">文字文字文字文字文字文字文字</div>
  </div>
</div>

aspect-ratio: width / height

这是css的一个新属性，给容器规定了一个宽高比。

指定宽高中的一个值，另一个是auto就可以自动计算。如果同时指定了宽高值，那么按照指定的值渲染。

另外。这个属性不能在行内元素和table布局里使用。

<style>
  .box {
    background-color: orange;
    aspect-ratio: 1 / 2;
  }
</style>
<div id="box" class="box">
  文字文字
</div>

这个属性的兼容性不太好，很多浏览器都没有实现，下图是实现的浏览器，可以参考一下
在这里插入图片描述