image resize with javascript without visual disturbance

Question

I have a dedicated image area on my html page. This area vary from the screen resolution. I have a javascript to resize these area accordingly. The problem is that on every reload my image is jumping to full size and back to fit which creates very nasty visual effect.

Can anyone advise me how to proceed and how to properly resize this image?

EDIT: The purpose of the resize code is to have the full height of the parent container.

    var windowHeight = $(window).height() - $("#myCarousel").offset().top ;

    $('#myCarousel .carousel-inner div img').css({
        height: (windowHeight) + 'px'
    })

Perhaps if you share your HTML & JavaScript we may be able to advise how to correct it, rather than starting from scratch. — James Thorpe
– James Thorpe, Commented Oct 26, 2015 at 13:18
Please share the code with the issue. Also, why you use JS to make that element responsive? — Roko C. Buljan
– Roko C. Buljan, Commented Oct 26, 2015 at 13:18

Roko C. Buljan · Accepted Answer · 2015-10-26 13:34:30Z

2

Your page jumps cause JS waits for document ready or worse for window load,
calculating the best fit for your image (apparently) and than triggering resize and browser redraw.

Don't use JS to make your elements responsive, use CSS and % size.

Sometimes the best way to show a large picture and make it nicely responsive is to set it as background-image:

<div id="heroImage" style="background-image:url(images/largeImage.jpg)"></div>

having this CSS:

#heroImage{
    height: 900px;                 /* for browsers who don't support "viewport" vh/vw */
    height: 100vh;
    background: 50% / cover;       /* use cover, contain or a %size */
}

jsBin demo ← resize and have fun

edited Oct 26, 2015 at 13:34

answered Oct 26, 2015 at 13:24

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

image resize with javascript without visual disturbance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related