CODEWITHSUNDEEP
javascriptcsshtml
user732456
user732456

Reputation: 2688

image resize with javascript without visual disturbance

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'
    })

Upvotes: 0

Views: 54

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

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

Upvotes: 2

Related Questions