CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Juice
Juice

Reputation: 111

Using this background slideshow with JQuery, I need the whole images to fit inside the div

I've set the .content div to height and width:auto, i want to force the image to fit inside the div without changing aspect ratio.

Here is the jquery:

    var images = ['pic1.jpg', 'pic2.jpg',   'pic3.jpg', 'pic4.jpg','pic5.jpg', 'pic6.jpg'];
    $(function () {
        var i = 0;
        $(".content").css("background-image", "url(pics/bg/" + images[i] + ")");
        setInterval(function () {
            i++;
            if (i == images.length) {
            i = 0;
        }
        $(".content").fadeOut("slow", function () {
            $(this).css("background-image", "url(pics/bg/" + images[i] + ")");
            $(this).fadeIn("slow");
        });
    }, 6000);
});

Upvotes: 1

Views: 55

Answers (2)

Mitch Lamers
Mitch Lamers

Reputation: 126

try using: 

.content {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

And simply replace the image within the loop as demonstrated on: https://css-tricks.com/perfect-full-page-background-image/

Upvotes: 1

TylerT
TylerT

Reputation: 69

add to the css "background-size","cover" OR try "background-size","contain" if images are different sizes and you need to manipulate further you can get the width or height properties and make a case statement to decide which way to crop. more information or an example would have been helpful.

Upvotes: 1

Related Questions