Center an image while keeping full screen height

Question

I want an image to remain the full height of the browser window even if the window is made smaller. This seems to do the trick. However, at current, the image remains anchored to the left side of the screen with the right side of the image being what is lost as the window resizes. Instead, I'd like the image to chop from both sides leaving a centered image. Is this possible?

Note: I need the image in a div, not set as background.

Thanks!

Here is the CSS I'm currently using:

.div
        {
        min-height:100%;
        min-width:100%;
        text-align:center;
        overflow: hidden;
        margin: 0 auto;
        }
.img
        {
        min-height:100%;
        min-width:100%;
        margin: 0 auto;
        }

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

something like this ?

var origWidth;
$(document).ready(function() {
    origWidth = $(window).width();  //store the window's width when the document loads
    origHeight = $(window).height();  //store the window's width when the document loads
});

$(window).resize(function() {
    var curWidth = $(window).width(); //store the window's current width
    var curHeight = $(window).width(); //store the window's current height
    var deltaTop = (curWidth- origWidth);
     var deltaLeft = (curHeight- origHeight);
    $("#image1").offset({top:($("#image1").offset().top + deltaTop)});
     $("#image1").offset({left:($("#image1").offset().top + deltaLeft)});
    origWidth = curWidth;
    origHeight =curHeight;
});

JsFiddle

(inspired by this question's solution: link)

did you view it in my jsfiddle link? you need to click "run" at the top — Ori Price, May 09 '14 at 22:35

Center an image while keeping full screen height

1 Answers1