HTML
<article class="mw5 mw7-ns center bg-light-gray pa3 pa5-ns">
<h4 class="f6">16:9</h4>
<div class="aspect-ratio aspect-ratio--16x9 mb4">
<div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
</div>
<h4 class="f6">8:5</h4>
<div class="aspect-ratio aspect-ratio--8x5 mb4">
<div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
</div>
<h4 class="f6">7:5</h4>
<div class="aspect-ratio aspect-ratio--7x5 mb4">
<div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
</div>
<h4 class="f6">6:4</h4>
<div class="aspect-ratio aspect-ratio--6x4 mb4">
<div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
</div>
<h4 class="f6">4:3</h4>
<div class="aspect-ratio aspect-ratio--4x3 mb4">
<div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
</div>
<h4 class="f6">1:1</h4>
<div class="aspect-ratio aspect-ratio--1x1 mb4">
<div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
</div>
</article>
css
.aspect-ratio {
height: 0;
position: relative;
}
.aspect-ratio--16x9 {
padding-bottom: 56.25%;
}
.aspect-ratio--4x3 {
padding-bottom: 75%;
}
.aspect-ratio--6x4 {
padding-bottom: 66.6%;
}
.aspect-ratio--8x5 {
padding-bottom: 62.5%;
}
.aspect-ratio--7x5 {
padding-bottom: 71.42%;
}
.aspect-ratio--1x1 {
padding-bottom: 100%;
}
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.cover {
background-size: cover !important;
}
.mw5 {
max-width: 16rem;
}
.bg-light-gray {
background-color: #eee;
}
.pa3 {
padding: 1rem;
}
.mb4 {
margin-bottom: 2rem;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.mw7-ns {
max-width: 48rem;
}
.pa5-ns {
padding: 4rem;
}
}