Edit in JSFiddle

<div class="grid-wrapper">
    <div class="ratio-1-1">
        <div class="content">1:1</div>
    </div>
</div>
<div class="grid-wrapper">
    <div class="ratio-4-3">
        <div class="content">4:3</div>
    </div>
</div>
<div class="grid-wrapper">
    <div class="ratio-16-9">
        <div class="content">16:9</div>
    </div>
</div>

.ratio-1-1 {
    padding-bottom: 100%; // 1:1
}
.ratio-4-3 {
    padding-bottom: 75%; // 4:3
}
.ratio-16-9 {
    padding-bottom: 56.25%; // 16:9
}
[class^="ratio"] {
    position: relative;
    width: 100%;
    height: 0;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Coloring and demo positioning */
body {
    font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.grid-wrapper {
    box-sizing: border-box;
    float: left;
    width: 33%;
    padding: 1em;
    text-align: center;
}
.content {
    padding: 1em;
}

.ratio-1-1 > .content {
    background: #588C7E;
}
.ratio-4-3 > .content {
    background: #F2E394;
}
.ratio-16-9 > .content {
    background: #F2AE72
}