jquery resize image

Question

Hey guys, quick question, all I want to do is resize an image to fit inside a small container when I run this function. Right now, only a portion of the image is shown inside the div. If anyone has any ideas, I would appreciate any advice.

$(this)
       .css({
           backgroundImage    : 'url(' + src + ')',   // set background image
           backgroundPosition : 'center center',      // position background image
           backgroundRepeat   : 'no-repeat'           // don't repeat image
       });

Jakub Hampl · Accepted Answer · 2010-05-06 23:53:36Z

4

Only very modern browsers (meaning Webkit) can scale background images. So I'd recommend inserting a new DOM element as the image and then changing it's height and width should scale it down. Than use CSS (things like position and z-index should help you) to position it where you need it.

answered May 6, 2010 at 23:53

Jakub Hampl

40.7k10 gold badges80 silver badges111 bronze badges

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

2 Comments

jay Over a year ago

Agreed. You should do this if you want a good browsing experience for all. You'll need to do some aspect ratio calculations if your images are going to be different sizes as well.

Scarface Over a year ago

yeah thats what I thought. Thanks guys.

Ivan Pavić · Accepted Answer · 2013-07-29 14:05:20Z

1

Well this is css:

#container{
    background-size: cover;
    -moz-background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    }

Jquery:

var url = "your_url";
$('#container').css("background-image", url);

answered Jul 29, 2013 at 14:05

Ivan Pavić

5485 silver badges23 bronze badges

Collectives™ on Stack Overflow

jquery resize image

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related