Skip to content

Instantly share code, notes, and snippets.

@sou5534
Created June 29, 2018 03:06
Show Gist options
  • Save sou5534/67e9322f0cd2af19de2c6f8490745037 to your computer and use it in GitHub Desktop.
Save sou5534/67e9322f0cd2af19de2c6f8490745037 to your computer and use it in GitHub Desktop.
.box {
position: relative;
width: 50%;
height: auto;
background: #444;
}
.ratio-1_1:before {
content: "";
display: block;
padding-top: 100%; /* 1:1 */
}
.inner {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
<div class="box ratio-1_1">
<div class="inner">
<p>1 : 1</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment