[TOC]
# 响应式+固定宽高比例
使用 `padding-top/padding-bottom` 来代替 `height`属性了.比如你想要让元素的按在 4:3 的比例显示, `width` 设置成了30%,那么 `padding-top/padding-bottom` 只需要设置成为 40%就可以了.同时把 `height` 设为0:
```css
.img-3-4 {
margin: 10px;
padding-bottom: 30%;
width: 40%;
height: 0;
background-color: #dbe0e4;
}
```
## Refs
来源:https://www.jianshu.com/p/56a3adebdb01
- 必备基础
- 基础知识
- BFC
- 层叠上下文 Stacking Context
- 视觉格式化模型 Visual formatting model
- CSS3中使用HSL颜色指南
- z-index
- line-height
- vertical-align 属性
- 垂直居中
- overflow
- CSS3 Gradients
- CSS3 动画基础
- 难点知识
- 布局篇
- Flex布局
- =====
- Grid布局
- 多列布局
- 高级布局
- 预编译器篇
- PostCSS
- Sass
- stylus
- 模块篇
- 良好的使用
- CSS 模块化
- 技巧篇
- 未来的CSS
- 动画篇
- 工具篇
- CSS架构
- CSS 命名方法论
- BEM
- CSS解释器
- 常用框架
- 参考
- 唰唰声