超大 – 如何拉伸图像？
我试图超大不要裁剪图像并拉伸它们以100％的宽度和高度填充背景（我不在乎图像是否扭曲）。
我正在使用fit_always因此图像不会被裁剪并在CSS中：
#supersized img { width:100%; height:100%; position:relative; display:none; outline:none; border:none; }
HTML
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'} ] }); });
工作正常，但如果我调整浏览器窗口的width:100%和height:100%被“遗忘”
我错过了什么？
你尝试过“自动”而不是100％吗？
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
根据我的经验，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(); });
容器宽度/高度可能会发生此问题。 您已将图像宽度高度设置为100％。 它会工作。 如果您的容器宽度/高度不是100％，那么图像不能。 如果没有容器，那么使用100％的body，html。
试试这个
#supersized img { background-repeat:no-repeat; background-size:100% 100%; }