[英]Supersized - How to stretch images?
I'm trying to get supersized not to crop images and stretch them to fill the background 100% in width and height (I don't care if the images get distorted). 我正在尝试使尺寸过大而不裁剪图像,并拉伸它们以使其宽度和高度100%填充背景(我不在乎图像是否变形)。
I'm using fit_always
so the images don't get cropped and in the CSS: 我正在使用
fit_always
因此图像不会被裁剪并在CSS中:
#supersized img {
width:100%;
height:100%;
position:relative;
display:none;
outline:none;
border:none;
}
HTML 的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>
Works fine, but if I resize the browser window the width:100%
and height:100%
gets "forgotten" 工作正常,但是如果我调整浏览器窗口的大小,则
width:100%
和height:100%
会被“忘记”
What am I missing? 我想念什么?
Have you tried "auto" instead of 100% ? 您是否尝试过“自动”而不是100%?
#supersized img {
width:auto;
height:auto;
position:relative;
display:none;
outline:none;
border:none;
}
In my experience, the default settings for Supersized do just what you want, without anything like fit_always
. 以我的经验,Supersized的默认设置
fit_always
您的需要,而不会像fit_always
。 In the demo code I have saved locally, the JS is like this: 在我保存在本地的演示代码中,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();
});
This problem can be happen for container width/height. 容器的宽度/高度可能会发生此问题。 You already set image width height to 100%.
您已经将图像宽度的高度设置为100%。 It will work.
它会工作。 If your container isn't 100% in width/height then image can't be.
如果您的容器的宽度/高度不是100%,那么图像就不能。 If there is no container then use 100% for body,html.
如果没有容器,则将100%用于body,html。
Try this 尝试这个
#supersized img {
background-repeat:no-repeat;
background-size:100% 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.