/*---------------------------------------------------------------------------
Common Image Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/
/* Background Image */
.bkg-img { background-repeat: no-repeat; background-size: cover; }
/* Make Img Cover Using <div.img-cover><picture><img>...*/
.img-cover { position: relative; overflow: hidden; }
.img-cover picture { width: 100%; height: 100%; display: flex; }
.img-cover picture img { object-fit: cover; object-position: center center; }
/* Make Img Cover Using Picture Tag <div.img-cover.picture-cover><img>... */
.img-cover.picture-cover { /*width: 100%; height: 100%; */display: flex; z-index: 0; }
.img-cover.picture-cover img { object-fit: cover; object-position: center center; }
/* Make Image Absolute and Cover with no specific height */
.img-cover.picture-absolute picture, .img-cover.img-absolute picture, .img-cover.img-absolute img
{ position: absolute; top: 0; width: 100%; height: 100%; z-index: -1; }
Image Helpers
Image Cover
Quickly set PICTURE tag as cover. Container has set height
.img-cover -> picture -> img
Quickly set IMG tag as cover. Container has set height
.img-cover.picture-cover -> img
Image Overlay Set Container Height
Paded Absolute Overlay over IMG container. Container has set height
.img-cover.picture-cover.relavite -> .box-over.spv.sph -> .flex-center-vertically
Paded Absolute Overlay over PICTURE container. Container has set height
.img-cover.picture-cover.relavite -> .box-over.spv.sph -> .flex-center-vertically
Image Overlay Child Sets Height
Overlay made with setting IMG as absolute. Height is defined Child’s Content
Overlay made with setting PICTURE as absolute. Height is defined Child’s Content