我试图在触发窗口调整大小功能时使用jquery制作全屏图像。但是我得到了这样的结果 - 你可以在图像的底部看到一个我不知道如何解决它的空白。
基本的html,
<!-- container -->
<div id="container" class="container">
<div class="holder-supersize" id="supersize">
<ul class="background-supersize">
<li><a href="#"><img src="styles/images/IMG_0250.jpg" alt="" width="1000" height="667" /></a></li>
<li><a href="#"><img src="styles/images/IMG_0255.jpg" alt="" width="667" height="1000" /></a></li>
<li class="active"><a href="#"><img src="styles/images/IMG_0323.jpg" alt="" width="1158" height="772" /></a></li>
</ul>
</div>
</div>
<!-- container -->
用于在窗口大小调整时更新图像大小的jquery,
$(document).ready(function(){
$(window).resize(function(){
$(".holder-supersize").each(function() {
//Define image ratio & minimum dimensions
var minwidth = .5*(640);
var minheight = .5*(480);
var ratio = 480/640;
//Gather browser and current image size
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();
//Check for minimum dimensions
if ((browserheight < minheight) && (browserwidth < minwidth)){
$(this).height(minheight);
$(this).width(minwidth);
}
else
{
//When browser is taller
if (browserheight > browserwidth){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
if (browserwidth > imagewidth){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
}
}
//When browser is wider
if (browserwidth >= browserheight){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
if (browserheight > imageheight){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
}
}
}
return false;
});
});
});
用于超大尺寸图片的CSS
/* Supersize -------------------------------------------*/
.holder-supersize {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:0;
}
.background-supersize {
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.background-supersize li {
width:100%;
height:100%;
overflow:hidden;
position:absolute;
left:0;
top:0;
text-align:center;
}
.background-supersize li img {
/* for image with height < width */
/**/
width:100%;
height:auto;
/* for image with height > width */
/*
width:auto;
height:100%;
*/
}
.background-supersize li ,
.background-supersize a,
.background-supersize img{
display:none;
}
.background-supersize .active,
.background-supersize .active a,
.background-supersize .active img{
display:inline;
}
这是jsfiddle上的链接,这是查看actual product的链接。
任何想法我做错了什么以及如何解决?
答案 0 :(得分:0)
看起来您的代码可以通过锁定高宽比来防止图像倾斜。因此,除非窗口具有相同的比例,否则您将在底部(对于高/窄窗口)或右侧空间(对于短/宽窗口)具有空间。
如果您希望图像倾斜,只需使高度等于窗口高度和宽度等于窗口宽度,即可简化代码。