[英]Supersized - How to stretch images?
我正在尝试使尺寸过大而不裁剪图像,并拉伸它们以使其宽度和高度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%
会被“忘记”
我想念什么?
您是否尝试过“自动”而不是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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.