Skip to content

Instantly share code, notes, and snippets.

@kovchiy kovchiy/thumbRatio.styl
Last active Aug 31, 2017

Embed
What would you like to do?
/*
* Блок тумбнеила
* Ширина задается числом колонок сетки (добавлением классов grid_col_1, grid_col_2...)
* Высота вычисляется согласно пропорции (_ratio), в процентах от ширины
*/
.thumb
display inline-block
background center center no-repeat
background-size cover
&:after
content ''
display block
// Проценты паддинга считаются от ширины контейнера
&_ratio
&_1x1:after
padding-bottom 100%
&_1x2:after
padding-bottom 200%
&_2x1:after
padding-bottom 50%
&_2x3:after
padding-bottom 150%
&_3x2:after
padding-bottom 66.67%
&_3x4:after
padding-bottom 133.33%
&_4x3:after
padding-bottom 75%
&_16x10:after
padding-bottom 62.5%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.