JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container ratio-1-1">
     <img src="http://pleaseenjoy.com/wp-content/uploads/2012/06/google_circle_logo.jpg" alt="google">
</div>

CSS

.container
{
    border: 1px solid #CCC;
    position: relative;
    width: 50%; 
    /*this is where your responsive layout will kick in - you should probabbly set this to 100% where the parent element is responsive*/
    display: inline-block;
    background-color: red;
 }
.container:after
{
    padding-top: 100%;
    position: relative;
    width: 100%;
    content: " ";
    display: block;
    z-index: 1;
}
.container img
{
    vertical-align: middle;
    margin: auto;
    position: absolute;
    max-width: 100%;
    height: auto;
    z-index: 2;
} 


.ratio-16-9:after {
    padding-top: 56.25%;
}
.ratio-4-3:after {
    padding-top: 75%;
}
.ratio-1-1:after {
    /*
    this is the default padding
    padding-top: 100%;
    */
}