超大尺寸-如何拉伸圖像？

Question

我正在嘗試使尺寸過大而不裁剪圖像，並拉伸它們以使其寬度和高度100％填充背景（我不在乎圖像是否變形）。

我正在使用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%會被“忘記”

我想念什么？

Answer 1

您是否嘗試過“自動”而不是100％？

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

Answer 2

以我的經驗，Supersized的默認設置fit_always您的需要，而不會像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(); 
});

Answer 3

容器的寬度/高度可能會發生此問題。 您已經將圖像寬度的高度設置為100％。 它會工作。 如果您的容器的寬度/高度不是100％，那么圖像就不能。 如果沒有容器，則將100％用於body，html。

Answer 4

嘗試這個

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