Question

我已将.content div设置为高度和宽度：auto，我想强制图像适合div而不改变宽高比。

这是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);
});

Answer 1

添加到CSS ＆＃34;背景大小＆＃34;＆＃34;盖＆＃34;或尝试＆＃34; background-size＆＃34;，＆＃34;包含＆＃34; 如果图像尺寸不同而您需要进一步操作，则可以获得宽度或高度属性并制作一个案例陈述来决定裁剪哪种方式。更多信息或示例会有所帮助。

Answer 2

尝试使用：

.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;
}

简单地替换循环中的图像，如下所示： https://css-tricks.com/perfect-full-page-background-image/

使用这个背景幻灯片与JQuery，我需要整个图像适合div

2 个答案: