scss-library/components/10_ContentShape/aspectRatio/_aspectRatio.styl

/**
 * Mixins to maintain aspect ratio of an element.
 */
RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
	+RV-Block__Modifier--name('XtoY')
		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('1to2')
		RV-AspectRatio--XtoY(1, 2)
		
RV-AspectRatio--2to1()
	+RV-Block__Modifier('2to1')
		RV-AspectRatio--XtoY(2, 1)
	
RV-AspectRatio--3to2()
	+RV-Block__Modifier('3to2')
		RV-AspectRatio--XtoY(3, 2)
		
RV-AspectRatio--4to3()
	+RV-Block__Modifier('4to3')
		RV-AspectRatio--XtoY(4, 3)
		
RV-AspectRatio--16to9()
	+RV-Block__Modifier('16to9')
		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-Block__Modifier()
		RV-AspectRatio--1to2()
	
	+RV-Block__Modifier()
		RV-AspectRatio--2to1()
		
	+RV-Block__Modifier()
		RV-AspectRatio--3to2()
		
	+RV-Block__Modifier()
		RV-AspectRatio--4to3()
		
	+RV-Block__Modifier()
		RV-AspectRatio--16to9()