Supersized - 如何拉伸图像？答案

【问题标题】：Supersized - How to stretch images?Supersized - 如何拉伸图像？
【发布时间】：2013-05-28 07:13:50
【问题描述】：

我正在尝试超大而不是裁剪图像并将它们拉伸以在宽度和高度上填充背景 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% 会被“遗忘”

我错过了什么？

【问题讨论】：

您是否希望视口始终具有相同的宽高比？否则您的图像可能会失真。
我的意思是，HTML文档中插入的图像在哪里。
是的，我不在乎图像是否会失真

标签： jquery css supersized

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

根据我的经验，Supersized 的默认设置就是你想要的，没有像 fit_always 这样的东西。在我本地保存的demo代码中，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(); 
});

【讨论】：

不，他们没有。我根本不希望图像被裁剪，而是希望它横跨浏览器的宽度和高度。
哦，我明白了。好吧，在 CSS 中你可以使用 background-size: 100% 100% 就可以了。但我意识到这在这里并不重要。

【解决方案3】：

容器宽度/高度可能会出现此问题。您已经将图像宽度高度设置为 100%。它会起作用的。如果您的容器的宽度/高度不是 100%，那么图像就不可能。如果没有容器，则使用 100% 作为 body,html。

【讨论】：

【解决方案4】：

试试这个

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

【讨论】：