How to keep an image full window, centred and responsive within ratio?

Question

I am trying to figure out how this website here has made the responsive header image that fills the window size onload and resizes with the window resize while still filling the window in it's original ratio.

This is what I have come up with so far but it is very glitchy...

Working fiddle

$(window).load(function() {
    $('#intro-background').height( $(window).height() );
    $('#intro-background img').height( $(window).height() );
    var imageRatio = (1900 / 1270); //Original image size

    $(window).resize(function() {
      $('#intro-background').height( $(window).height() );
      var windowRatio = $(window).width() / $(window).height();

      if(windowRatio != imageRatio) {

        if($('#intro-background img').width() < $(window).width()) {
            $('#intro-background img').width($(window).width());
            $('#intro-background img').height($(window).width() / imageRatio);
        } else if( $('#intro-background img').height() > $(window).height() ) {
            $('#intro-background img').height($(window).height());
            $('#intro-background img').width($(window).height() * imageRatio);  
        }

        if($('#intro-background img').height() < $(window).height()) {
          $('#intro-background img').height($(window).height());
          $('#intro-background img').width($(window).height() * imageRatio);
        }

      }
   });
});

Sorry I have updated the fiddle link to show not only the result — Beno, Dec 17 '15 at 18:49

BonifatiusK · Accepted Answer · 2015-12-18T11:09:28.427

0

they just run a script every second which does the calculation and then sets the height and width. In this case you are wisely using the window resize functionality within jQuery

Look at: https://api.jquery.com/resize/

In you fiddle you are resizing a div with $(window).resize You can solve this solely by using CSS. Remember that using javascript will be slower than using CSS.

Have a look at this fiddle Hence the following in the CSS:

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

I also removed the width and height from the #img id Resizing now works perfectly

If you really would like te resize a image without setting an incorrect ratio you can look at this fiddle where I use real image to resize on the resize of the screen.

All you have to do there is:

$(window).resize(function() {
    var height = ($('#intro-background').width() / 4);    
    $('#img').css('height', height);
});

If you would like to keep your 100% height on a real image you can also set CSS to handle the image for you. Have a look at this fiddle for that.

Here also you need to set *, html in the CSS and of course use background-size: cover;

See here:

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

#img {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:red;
    margin: auto;
}

edited Dec 18 '15 at 11:09

answered Dec 17 '15 at 11:05

BonifatiusK

2,281
5
29
43

Try resize the window until it is about less than 100px tall. The width starts hopping about. – Beno Dec 17 '15 at 11:20
I will try it in a different browser, the fiddle I placed does work with a real image and no hopping around. – BonifatiusK Dec 17 '15 at 12:12
Your fiddle, is chrome at least, allows the container to become less than 100% height and thus restricting the size of the image. I have update my fiddle link. If you view it with all the code windows visible you should be able to recreated the width hopping I mentioned (red container becomes narrow exposing the yellow) – Beno Dec 17 '15 at 18:52
I can see the hopping, let me see if I can change that for you. Can you tell me why you need to have the 100% height? As you are using a DIV you can also do something else to keep the height 100% and the with flexible without doing a window resize – BonifatiusK Dec 18 '15 at 10:44
So @Beno I created several fiddles, basically showing options using CSS in stead of javascript for your solution. This is faster and works smooth so no glitches here. – BonifatiusK Dec 18 '15 at 11:11
Thank you! I have gone with your last fiddle. I really appreciate all the effort! =D – Beno Dec 18 '15 at 20:00

score 0 · Answer 2 · answered Dec 17 '15 at 11:09

For my experience, I will never use a code like yours for what you need, I mean there are a lot of stuff to consider, resolution, border, transition, carousel, mobile etc. I always used BACKSTRETCH it's easy, lite, and faster for this kind of stuff, or if you don't need to work with old browser, consider to use CSS

#myelement{
    background-size:cover
}

score 0 · Answer 3 · answered Dec 17 '15 at 19:20

I now have this which works pretty well

Fiddle

function imageResize() {
var imageRatio = (1900 / 1270); //Original image size
if( $('#intro-background img').height() != $(window).height() ) {   
    $('#intro-background img').height( $(window).height() ).width( $(window).height() * imageRatio );
    if( $('#intro-background img').width() < $(window).width() ) {
        $('#intro-background img').width( $(window).width() ).height( $(window).width() / imageRatio );
    }
}}
imageResize(); // Called onLoad
$(window).resize(function() {
    imageResize();
});

Any suggestions of doing this a better way? I would also like the image to stay centred to the resizing container.

How to keep an image full window, centred and responsive within ratio?

3 Answers3