宽度是高度的两倍 (等比缩放)
实现思路: 以父级元素为基准, 子级 width:100%;(也就是父级宽度的 100%), padding-top:50%(也就是父级宽度的 50%, 根据 CSS 规范, padding 用百分比表示的话, padding: 100% 等于父元素的宽度);
为什么不直接 `width: 50%; height: 50%;?
那样高度就成了父级高度的 50% (不合题意, 除非父级宽高相等);
原题目:
红色块级元素垂直居中于屏幕中央;
红色块级元素距离屏幕左右边距各 20px;
红色块级元素里面的内容水平垂直居中;
红色部分宽高之比 2:1
源码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 宽高比例固定 </title>
- <style>
- .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;
- }
- </style>
- </head>
- <body>
- <section class="father">
- <div class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt=""width="200px"> 王也, 武当派弟子 (现已离开武当), 八奇技之一风后奇门的继承人, 靠占卜悟出天道, 却又作出甘于投身乱世的选择外表一副老好人的温良相, 谦谦有礼如温吞水般, 做事也经常是一副没精打采, 貌似没睡醒的样子优哉游哉还脾气软, 代表举动经常是歉意笑着作出让步似乎对什么都无所谓, 一副悠然道人之姿, 但是在涉及到家人安危时毫不含糊, 甚至为此做出过有失冷静的举动不小心爆粗都会拜祖道歉的出家人, 实力在后生一辈中甚至称得上头筹, 暂时只有一次完全没预料到地阴沟里翻船 </span></div>
- </section>
- </body>
- </html>
来源: http://www.jianshu.com/p/dcdeeb8a3e9f