宽度是高度的两倍(等比缩放)实现思路: 以父级元素为基准, 子级width:100%;(也就是父级宽度的100%), padding-top:50%(也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于父元素的宽度);
为什么不直接`width: 50%; height: 50%;?那样高度就成了父级高度的50% (不合题意,除非父级宽高相等);
原题目:红色块级元素垂直居中于屏幕中央;
红色块级元素距离屏幕左右边距各20px;
红色块级元素里面的内容水平垂直居中;
红色块级元素的高度始终是红色块级元素宽度的50%。
红色部分宽高之比2:1
源码:html>
宽高比例固定.father{ overflow: hidden; position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); background-color: #0c8ac5;
} .son{ width: 100%; padding-top: 50%; background-color: #c03035;
} span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #D8D8D8;
} img{ float: left; margin-right: 10px; border: 2px solid #fdf6e3;
}
![eb3a4e344ccd93346875abfd701de0e6.png](https://img-blog.csdnimg.cn/img_convert/eb3a4e344ccd93346875abfd701de0e6.png)