Created
April 2, 2017 03:29
-
-
Save iflamed/06e3e72a46ac89cb3f527256679fbc29 to your computer and use it in GitHub Desktop.
纯css实现正方形框，通过变形:after伪元素的margin-top 的值还可以实现其它比例的高度。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .responsive-bg { | |
| display: block; | |
| width: 100%; | |
| background-color: #fff; | |
| background-position: center; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| overflow: hidden; | |
| } | |
| .responsive-bg:after { | |
| content: ''; | |
| display: block; | |
| margin-top: 100%; /* margin 百分比相对父元素宽度计算 */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
参考地址: https://idiotwu.me/css-responsive-square/