//----------------------------
// Intrinsic Ratio Mixins
//----------------------------
// used by @include pad-ratio
// makes the content stretch x & y
@mixin stretch-xy-abs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// included in .ratio and uses padding to shape the container
@mixin pad-ratio($x, $y, $selector: ".element-to-stretch") {
position: relative;
padding: 0 0 percentage($y/$x);
height: 0;
@if($selector !=false) {
#{$selector} {
@include stretch-xy-abs();
}
}
}
//----------------------------
// Intrinsic Ratio Classes
//----------------------------
.ratio > .cover {
@include stretch-xy-abs();
}
.ratio._1x1 {
@include pad-ratio( 1, 1, 'cover');
}
.ratio._2x1 {
@include pad-ratio( 2, 1, 'cover');
}
.ratio._3x1 {
@include pad-ratio( 3, 1, 'cover');
}
.ratio._4x3 {
@include pad-ratio( 4, 3, 'cover');
}
.ratio._16x9 {
@include pad-ratio( 16, 9, 'cover');
}
.ratio._1920x1080 {
@include pad-ratio( 1920, 1080, 'cover');
}
//----------------------------
// Intrinsic Ratio Example
//----------------------------
.box {
// put in columns
float: left;
width: (1/5) * 100%;
// center h/v
.content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
// create colors for example
$colors: #56c7fa, #f76540, #ffcb05, #62cd9f, #b67baa;
@for $i from 1 through length($colors) {
$colors: append($colors, darken(nth($colors, $i), 25));
}
// apply colors based on order
@each $color in $colors {
$i: index($colors, $color);
&:nth-of-type(#{$i}) {
background: #{$color};
}
}
}
//----------------------------
// HTML
//----------------------------
/*
<div class="box">
<div class='ratio _1x1'>
<div class="cover">
<div class="content">1 x 1</div>
</div>
</div>
</div>
<div class="box">
<div class='ratio _16x9'>
<div class="cover">
<div class="content">16 x 9</div>
</div>
</div>
</div>
<div class="box">
<div class='ratio _4x3'>
<div class="cover">
<div class="content">4 x 3</div>
</div>
</div>
</div>
<div class="box">
<div class='ratio _2x1'>
<div class="cover">
<div class="content">2 x 1</div>
</div>
</div>
</div>
<div class="box">
<div class='ratio _3x1'>
<div class="cover">
<div class="content">3 x 1</div>
</div>
</div>
</div>
*/
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.