Jquery 超大-如何拉伸图像？

我正在尝试使图像变得超大，而不是裁剪图像，并拉伸它们以100%的宽度和高度填充背景（我不在乎图像是否失真）

我一直在使用

fit\u

，这样图像就不会被裁剪，并且在CSS中：

#supersized img { 
    width:100%;
    height:100%;
    position:relative;
    display:none;
    outline:none;
    border:none;
 }

HTML

jQuery（函数（$）{
$.supersized（{
//功能性
滑动间隔：5000，
过渡：1，
转换速度：500，
水平_中心：0，
始终适合：1，
//组成部分
幻灯片：[//幻灯片放映图像
{image:'/img/main/home.jpg'}，
{image:'/img/main/home-2.jpg'}，
{image:'/img/main/home-3.jpg'}，
{image:'/img/main/home-4-test.jpg'}，
{image:'/img/main/home-4.jpg'}
]    
});
});

工作正常，但是如果我调整浏览器窗口的大小，

宽度：100%

和

高度：100%

会被“遗忘”

我错过了什么？

你试过“自动”而不是100%吗

#supersized img { 
   width:auto;
   height:auto;
   position:relative;
   display:none;
   outline:none;
   border:none;
 }

---

根据我的经验，Supersized的默认设置可以满足您的需要，而不需要像

fit\u总是
。在我本地保存的演示代码中，JS如下所示：

$(function(){
    $.fn.supersized.options = {  
        startwidth: 640,  
        startheight: 480,
        vertical_center: 1,
        slideshow: 1,
        navigation: 1,
        thumbnail_navigation: 1,
        transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
        pause_hover: 0,
        slide_counter: 1,
        slide_captions: 1,
        slide_interval: 3000,
        slides : [
            {image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'},
            {image : 'slides/fence.jpg', title : 'Canal Park Fence', url : 'http://www.flickr.com/photos/wumbus/4582735030/sizes/l/in/set-72157623876357531/'},  
            {image : 'slides/tracks.jpg', title : 'Old Train Tracks', url : 'http://www.flickr.com/photos/wumbus/4582733542/in/set-72157623876357531/'}
        ]
    };
    $('#supersized').supersized(); 
});

集装箱宽度/高度可能会出现此问题。您已经将图像宽度高度设置为100%。它会起作用的。如果您的容器的宽度/高度不是100%，则图像不能为100%。如果没有容器，则将100%用于正文、html。
试试这个

 #supersized img {                      
    background-repeat:no-repeat;
    background-size:100% 100%;
    }

您是否希望视口始终具有相同的宽高比？否则您的图像可能会失真。我的意思是，HTML文档中插入的图像在哪里。是的，我不在乎图像是否会失真不，它们不会。我根本不希望图像被裁剪，而是希望它在浏览器的宽度和高度上被拉伸。哦，我明白了。在CSS中，你可以使用背景大小：100%100%
，这样就可以了。但我意识到这在这里并不重要。
 #supersized img {                      
    background-repeat:no-repeat;
    background-size:100% 100%;
    }