宽度是高度的两倍(等比缩放)实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding-top:50% (也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于父元素的宽度);
为什么不直接`width: 50%; height: 50%;?
那样高度就成了父级高度的50% (不合题意,除非父级宽高相等);
原题目:
红色块级元素垂直居中于屏幕中央；
立即学习“前端免费学习笔记（深入）”；
红色块级元素距离屏幕左右边距各20px;
红色块级元素里面的内容水平垂直居中；
红色块级元素的高度始终是红色块级元素宽度的50%。
红色部分宽高之比2:1
源码:
宽高比例固定 .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; }@@##@@ 王也, 武当派弟子（现已离开武当），八奇技之一风后奇门的继承人，靠占卜悟出天道，却又作出甘于投身乱世的选择。外表一副老好人的温良相，谦谦有礼如温吞水般，做事也经常是一副没精打采，貌似没睡醒的样子。优哉游哉还脾气软，代表举动经常是歉意笑着作出让步。似乎对什么都无所谓，一副悠然道人之姿，但是在涉及到家人安危时毫不含糊，甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人，实力在后生一辈中甚至称得上头筹，暂时只有一次完全没预料到地阴沟里翻船。
相关推荐：
PHP按最大宽高等比例缩放图片类
以上就是CSS实现宽高等比布局的代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609099.html
微信扫一扫 
支付宝扫一扫 
