Aspect Ratio 4x6
HTML
<article class="mw5 mw6-ns center pt4">
<div class="aspect-ratio aspect-ratio--4x6 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--4x6 {
padding-bottom: 150%;
}
.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;
}
.pt4 {
padding-top: 2rem;
}
.mb4 {
margin-bottom: 2rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.mw6-ns {
max-width: 32rem;
}
}
Css stats for this component
- Gzipped Size
- 280B
- Selectors
- 9
- Declarations
- 18
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-aspect-ratios tachyons-background-size tachyons-max-widths tachyons-spacing tachyons-utilities