Javascript 使用JQuery的这个背景幻灯片，我需要整个图像来适应div

我已经将.content div设置为height和width: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);
});

添加到css “背景大小”、“封面”或尝试“背景大小”、“包含” 如果图像大小不同，并且需要进一步操作，则可以获取宽度或高度属性，并通过案例说明来决定裁剪的方式。更多的信息或一个例子会有所帮助

尝试使用：

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

只需更换循环中的图像，如图所示：

---

非常感谢。。每件事都简单有效。。也谢谢你的链接。。现在我有另一个问题，我在div中有内容，只是想要一个图像背景。。现在的情况是，背景图像和div中的内容正在淡入淡出。。如何修复此问题？当您在.content类中淡入淡出时，这也将淡出该类中的实际内容。我在这里找到了一个类似的问题并给出了答案[链接]请在这里查看。。