Supersized - 如何拉伸图像？

我试图让超大尺寸不裁剪图像和拉伸他们填充背景100％的宽度和高度（我不在乎如果图像变形）。Supersized - 如何拉伸图像？

我使用fit_always所以图像没有得到裁剪并在CSS：

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

HTML

<script type="text/javascript"> 
jQuery(function($){ 
    $.supersized({ 
    // Functionality 
    slide_interval : 5000, 
    transition : 1, 
    transition_speed : 500, 
    horizontal_center : 0, 
    fit_always : 1, 

    // Components       
    slides : [ // Slideshow Images 
       {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'} 
      ]  
    }); 
}); 
</script>

工作正常，但如果我调整浏览器窗口中的width:100%和height:100%得到“忘记”

我错过了什么？

来源

2013-05-28 Cris

我们可以看到HTML？ – Maresh

您是否期望视口始终具有相同的宽高比？否则你的图像可能会失真。 – Mike

我的意思是，插在HTML文档中的图像在哪里。 – Maresh

您是否试过“自动”而不是100％？

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

来源

2013-05-28 07:43:43 MrSo

是的，不起作用。 – Cris

以我的经验，对于超大尺寸的默认设置做的只是你想要什么，不喜欢什么fit_always。在我本地保存的演示代码中，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(); 
});

来源

2013-05-28 07:51:11

不，他们没有。我不希望图像被裁剪，并希望它在浏览器的宽度和高度上延伸。 – Cris

O，我明白了。那么，在CSS中，你可以使用'background-size：100％100％'，那样做。但是我意识到这不是真的有关。 –

对于容器宽度/高度，可能会发生此问题。您已将图像宽度高度设置为100％。它会工作。如果你的容器不是100％的宽度/高度，那么图像不能。如果没有容器，那么使用100％的body，html。

来源

2013-05-28 07:56:18 HADI

-1

试试这个

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

来源

2013-05-28 08:44:58 Aravind30790

Supersized - 如何拉伸图像？

回答

相关问题