Update mixin file with the following code, the image-cover mixin wasn't work. this gets it to work with bootstrap
//// maintain-ratio(), proportional-container() and image-cover() =
///
/// Set a container to crop an element and maintain an aspect ratio
/// Use proportional-container() and image-cover() together:
///
/// @link https://gist.github.com/brianmcallister/2932463
///
/// @example scss - Usage
/// .container {
/// @include proportional-container(16 9);
///
/// .element {
/// @include image-cover();
/// }
/// }
///
/// @example css - Output
/// .container {
/// position: relative;
/// overflow: hidden;
/// z-index: 1;
/// width: 100%;
/// height: 0;
/// padding-bottom: 56.25%;
/// }
/// .container .element {
/// transform: translateX(-50%);
/// top: 0;
/// left: 50%;
/// width: auto;
/// max-width: none;
/// height: 100%;
/// }
////
/// maintain-ratio() =
/// Helper mixin that calculates a percentage padding value to "fix" the proportions of a container to an aspect ratio
/// @author jhogue
///
/// @param {list} Ratio [1 1]
///
/// @require {function} length
/// @require {function} percentage
/// @require {function} nth
///
/// @example scss - Usage
/// @include maintain-ratio(16 9)
///
/// @example css - Output
/// width: 100%;
/// height: 0;
/// padding-bottom: 56.25%;
///
@mixin maintain-ratio($ratio: 1 1) {
@if length($ratio) < 2 or length($ratio) > 2 {
@warn '$ratio must be a list with two values.';
}
width: 100%;
height: 0;
padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1));
}
/// proportional-container() =
/// Sets a container to "crop" an element to a fixed aspect ratio
/// @author jhogue
///
/// @param {list} Ratio [1 1]
///
/// @require {mixin} maintain-ratio
///
/// @example scss - Usage
/// @include proportional-container(16 9)
///
/// @example css - Output
/// position: relative;
/// overflow: hidden;
/// z-index: 1;
/// height: 0;
/// padding-bottom: 56.25%;
/// width: 100%
///
@mixin proportional-container($ratio: 1 1) {
@include maintain-ratio($ratio);
position: relative;
overflow: hidden;
z-index: 1;
}
/// image-cover() =
/// Sets a container to "crop" an element to a fixed aspect ratio
/// @author jhogue
///
/// @param {String} $center ['100% auto']
/// Accepts '100% auto' (width height), 'auto 100%' (width height), or 'contain'
///
/// @example scss - Usage
/// @include image-cover('auto 100%');
///
@mixin image-cover($center: '100% auto') {
$allowed: ('100% auto','auto 100%','contain','cover');
@if not index($allowed, $center) {
@error 'Keyword `#{$center}` for mixin 'image-cover' is not allowed. `#{$allowed}` is expected.';
}
position: absolute;
z-index: 2;
@if ($center == 'contain') {
// Keep the entire element inside the container
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: auto;
height: auto;
max-height: 100%;
} @else if ($center == 'cover') {
// Keep the entire element inside the container
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
} @else if ($center == '100% auto') {
// Fill the width, let the height be what it needs to be
transform: translateY(-50%);
top: 50%;
left: 0;
width: 100%;
height: auto;
} @else {
// Default: Fill the height, let the width be what it needs to be
transform: translateX(-50%);
top: 0;
left: 50%;
width: auto;
max-width: none;
height: 100%;
}
}