Simple full screen image

by Andrew Maestro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
    <div class="img-fullscreen">
        <img src="https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg" alt=""/>
    </div>
</div>

CSS

/*
 * Reset browser styles
 */

* {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: transparent;
    vertical-align: top;
    outline: 0;
    padding: 0;
    margin: 0;
}

html {
    overflow: auto;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    line-height: 1;
    z-index: 0;
}

body&::before {
    content:"";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
 
/*
 * Hide scrollbars
 */

#wrapper {
    overflow: hidden;
}

/*
 * Basic styles
 */

.img-fullscreen {
    position: relative;
    overflow: hidden;
}

.img-fullscreen img {
    vertical-align: middle;
    position: absolute;
    display: table;
    margin: auto;
    height: auto;
    width: auto;
    bottom: -100%;
    right: -100%;
    left: -100%;
    top: -100%;
}

.img-fullscreen .full-width {
    width: 100%;
}

.img-fullscreen .full-height {
    height: 100%;
}

JavaScript

jQuery(function($) {
	function resizeImage() {
        $('.img-fullscreen').each(function () {
            var $imgWrp = $(this);
            $('img', this).each(function () {
                var imgW = $(this)[0].width,
                    imgH = $(this)[0].height;
                $(this).removeClass();
                $imgWrp.css({
                	width: $(window).width(),
                    height: $(window).height()
                });
                imgW / imgH < $(window).width() / $(window).height() ?
                    $(this).addClass('full-width') : $(this).addClass('full-height');
            });
        });
    }

    window.onload = function () {
        resizeImage();
    };

    var timer;
    window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(resizeImage, 1);
    };
 
    resizeImage();
});