Овај чланак из јула 2013. године описује метод коришћења псуедо елемената за одржавање односа ширине и висине елемената, чак и када се скалира.
Ево комбинације Сасс-а која мало поједностављује математику.
@mixin aspect-ratio($width, $height) ( position: relative; &:before ( display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; ) > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; ) )Комбинација претпоставља да ћете угнежђати елемент са класом садржаја унутар вашег почетног блока. Овако:
insert content here this will maintain a 16:9 aspect ratio Коришћење микина је једноставно као:
.sixteen-nine ( @include aspect-ratio(16, 9); )Резултат:
.sixteen-nine ( position: relative; ) .sixteen-nine:before ( display: block; content: ""; width: 100%; padding-top: 56.25%; ) .sixteen-nine > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; )Демо
Ево демонстрације која приказује горњи код на делу. Анимација је додата како би приказала елемент који одржава задати однос ширине и висине.
Погледајте демо о одржавању односа омјера оловке, аутора Сеан Демпсеи (@сеансеансеан) на ЦодеПен-у.
Хвала Шону Демпсију (@тхатсеандемпсеи) на овом!