css容器长宽比（用padding-top来控制高度）

敲起来blingbling

于 2021-09-08 21:57:58 发布

阅读量949

点赞数

分类专栏： # 面试笔记（三）【CSS】篇文章标签： css

本文链接：https://blog.csdn.net/weixin_45695200/article/details/120189922

版权

CSS 属性选择器响应式布局自定义属性 padding-top

关键词由CSDN通过智能技术生成

面试笔记（三）【CSS】篇专栏收录该内容

11 篇文章

订阅专栏

该博客探讨了一种利用CSS属性选择器和自定义属性来实现响应式布局的方法。通过在div元素上设置data-ratio属性，如'4:3'，并根据这个比例调整padding-top，可以动态地保持元素的宽高比。例如，当data-ratio为4:3时，padding-top设置为75%，以保持内容区域的正确比例。这种方法避免了使用JavaScript进行复杂的尺寸计算，简化了响应式设计的实现。

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

div上设置一个自定义属性，值为长宽比，假设为4:3。

容器宽度width设为100%，高度height先设为0；（因为是用padding-top来控制高度的）
接着通过属性选择器，当自定义属性值为比如4:3的时候，padding-top就是 100% × 3/4 = 75%

 <div class="aa" data-ratio="4:3"></div>.

.aa {
    position: relative;  /*因为容器所有子元素需要绝对定位*/
    height: 0;  /*容器高度是由padding来控制，盒模型原理告诉你一切*/
    width: 100%;
}
.aa[data-ratio="16:9"] {
   padding-top: 56.25%; /* 100%*(9/16)  */
}
.aa[data-ratio="4:3"] {
   padding-top: 75%;
}