/** * Mixins to maintain aspect ratio of an element. */ RV-AspectRatio--XtoY(aspectX=1, aspectY=1) +RV-Block--modifier() RV-CSSParameter({ aspectX: aspectX, aspectY: aspectY }) padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX) &:last-child margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX) RV-Utils__ElementAmount(1, @(index, totale){ margin-bottom 0px }) RV-AspectRatio--1to2() +RV-Block--modifier() RV-AspectRatio--XtoY(1, 2) RV-AspectRatio--2to1() +RV-Block--modifier() RV-AspectRatio--XtoY(2, 1) RV-AspectRatio--3to2() +RV-Block--modifier() RV-AspectRatio--XtoY(3, 2) RV-AspectRatio--4to3() +RV-Block--modifier() RV-AspectRatio--XtoY(4, 3) RV-AspectRatio--16to9() +RV-Block--modifier() RV-AspectRatio--XtoY(16, 9) RV-AspectRatio() position relative overflow hidden height unset width unset * object-fit cover position absolute top 0 left 0 bottom 0 right 0 +RV-Block('RV-AspectRatio') RV-AspectRatio() RV-AspectRatio--1to2() RV-AspectRatio--2to1() RV-AspectRatio--3to2() RV-AspectRatio--4to3() RV-AspectRatio--16to9()