object fit - markhowellsmead/helpers GitHub Wiki
object-fit is supported in Chrome, Firefox and Safari. It was added to Microsoft Edge in version 16, but only for img tags. You'll need to add a fallback for older browsers.
-
https://github.com/tonipinel/object-fit-polyfill
- Install NPM module:
npm install --save object-fit-polyfill - Load JS into your JavaScript file during the
gulpprocess:require('object-fit-polyfill'); - Add
data-object-fit="cover"ordata-object-fit="contain"to theimgtag.
- Install NPM module:
Mainly planned for use with images.
.is--object-cover {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .5;
}
.is--object-cover-outer {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.no-objectfit { // Modernizr detection class
.is--object-cover {
@media screen {
opacity: 0;
}
}
}
$(document).on('ready.objectcover', function() {
$('img.is--object-cover').each(function(){
$(this).parent().css('background-image', 'url(' + $(this).attr('src') + ')');
});
});
$('.lazyload').on('lazyloaded', function(){
$(this).parent().css('background-image', 'url(' + $(this).attr('src') + ')');
});
The following is a workaround for the video element.
<div class="video-container-hero">
<video class="video">
<source src="{{ video.src }}" type="video/mp4">
</video>
</div>
Don't forget to run this through Autoprefixer!
.video-container-hero {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 0;
}
.video-container-hero .video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
}