jquery resize image
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 ba开发者_Python百科ckground image
backgroundRepeat : 'no-repeat' // don't repeat image
});
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.
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);
精彩评论