Skip to content

Instantly share code, notes, and snippets.

@iflamed

iflamed/squarebox.css

Created April 2, 2017 03:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iflamed/06e3e72a46ac89cb3f527256679fbc29 to your computer and use it in GitHub Desktop.
Save iflamed/06e3e72a46ac89cb3f527256679fbc29 to your computer and use it in GitHub Desktop.
Download ZIP
纯css实现正方形框，通过变形:after伪元素的margin-top 的值还可以实现其它比例的高度。
Raw
squarebox.css
.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 百分比相对父元素宽度计算 */
}
@iflamed
Copy link
Author

iflamed commented Apr 2, 2017

参考地址: https://idiotwu.me/css-responsive-square/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment