Covering a whole page with centered image while keeping aspect ratio and showing full image

Question

Covering a page with image in CSS seems troublesome. My prequisities are:

1) Image always fully visible 2) Cover as much as possible 3) Keep aspect ratio 4) Desktop - mobile responsiveness

Any feasible solutions? I've tried the infamous flex-box, basic css, jquery and background-size: contain, but I seem to be missing something.

My goal is to fill the whole page with an image, keep the aspect ratio always correct and fill as much as I can from the screen space (rotation is okay on mobile devices).

  .className {
      max-width: 100%;
      max-height: 100%;
      bottom: 0;
      left: 0;
      margin: auto;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
  }

EDIT: http://jsfiddle.net/xem36f7h/4/ is behaving correctly besides some weird scrollign with iphone 5S

css's background-size is worth looking into once you get a suitable overlay container defined. — dandavis, Feb 13 '15 at 23:13
If you're willing to use a JS solution check out backstretch - https://github.com/srobbin/jquery-backstretch — hopkins-matt, Feb 13 '15 at 23:14
@hopkins-matt seems like the image is not always fully visible in that solution. Correct me if wrong — Capuchin, Feb 13 '15 at 23:17
http://stackoverflow.com/a/18490463/1967395 this is the closest thing i've found, but it has some mobile problems — Capuchin, Feb 13 '15 at 23:21
@thevangelist I must have missed that. So you are looking for the image to be as large as possible without any of the image going off the page? — hopkins-matt, Feb 13 '15 at 23:21
What aspect ratio are the pictures? and landscape or portrait? — hopkins-matt, Feb 13 '15 at 23:22
Aspect ratio varies from image to image, landscapes and tall images are expected — Capuchin, Feb 13 '15 at 23:25
Possible duplicate of [Responsive Image full screen and centered - maintain aspect ratio, not exceed window](https://stackoverflow.com/questions/18490334/responsive-image-full-screen-and-centered-maintain-aspect-ratio-not-exceed-wi) — gbjbaanb, Aug 23 '19 at 14:06

score 1 · Answer 1 · answered Jan 15 '16 at 21:17

I wrote this. It seem to work on every device I tested its. Just change YOURIMAGESOURCE, YOURIMAGEX, YOURIMAGEY.

HTML

<div id="resizediv">
    <img src="YOURIMAGESOURCE">
</div>

CSS

#resizediv  {
    margin: auto;
    left: 0;
    right:0;
    }

#resizediv  img {
    width: 100%;
    height: 100%;
}

JQUERY

<script>
function resizebyratio(x, y) {
    var screenw = window.innerWidth;
    var screenh = window.innerHeight;
    var screenratio = screenw / screenh;

    var divratio = x / y;

    if (divratio <= 1) {
        var divwidth = screenh * x / y;
        $("#resizediv").css({"height":screenh+"px", "width":divwidth+"px"});
    }
    else if (1 < divratio && divratio <= screenratio) {
        var divwidth = screenh * x / y;
        $("#resizediv").css({"height":screenh+"px", "width":divwidth+"px"});
    }   
    else { 
        var divheight = screenw * y / x;
        var mtop = (screenh - divheight) / 2;
        $("#resizediv").css({"width":screenw+"px", "height":divheight+"px", "margin-top":mtop+"px"});
    };

};

$(document).ready(resizebyratio(YOURIMAGEX, YOURIMAGEY));
</script>

You can also use it with a video content, instead of an image. Or you can use a background image, just change css and html a bit. — Silvia Malavasi, Jan 15 '16 at 22:04

score 0 · Answer 2 · answered Feb 13 '15 at 23:32

0

Have you tried background-size: cover?

http://jsbin.com/limobop/1/edit?css,output

answered Feb 13 '15 at 23:32

This is what I am aiming for, iPhone 5S still shows some weird content scrolling. http://jsfiddle.net/xem36f7h/4/ – Capuchin Feb 13 '15 at 23:42

hopkins-matt · Answer 3 · 2015-02-14T17:03:00.077

I'm not sure how many images are on the page together, but this will find all of images the and resize by height.

Update: This will now maintain aspect ratio and maximize size without going off page.

JS:

function resize() {
    var img = document.getElementsByTagName('img'); 

    var w = window.innerWidth;
    var h = window.innerHeight;
    console.log(w);
    console.log(h);

    for (i = 0; i < img.length; i++) { 
        var ratio = (img[i].clientHeight / img[i].clientWidth);
        if (img[i].clientHeight > h && img[i].clientWidth < w) {
            img[i].style.height = h + "px";
            img[i].style.width = (h / ratio) + "px";
        }
        if (img[i].clientHeight <= h && img[i].clientWidth < w && ratio > 1) {
            img[i].style.height = h + "px";
            img[i].style.width = (h / ratio) + "px";
        }
        if (img[i].clientWidth >= w) {
            img[i].style.width = w + "px";
        }
        if (img[i].clientHeight < h && img[i].clientWidth <= w  && ratio < 1) {
            img[i].style.width = w + "px";
        }
    }
}

resize();
window.onresize = resize;

CSS:

img {
    max-width:100%;
    max-height:100%;
    display: block;
    margin: 5px auto
}

http://jsfiddle.net/hopkins_matt/k7t26sw5/

Covering a whole page with centered image while keeping aspect ratio and showing full image

3 Answers3