[英]Div resize on window resize
我的问题是, 加载内容时,所有5个div都适合,但是当我调整窗口大小时,容器的大小不再适合布局。
要使用同位素和此脚本将布局调整为适合.small_box div的图像,请执行以下操作:
// fittocontainer
jQuery.fn.fittocontainer =
function(){
var div = this.parent();
var img = this;
var imAR = img.attr("height") / img.attr("width");
var bgAR = div.height() / div.width();
if(imAR >= bgAR){
img.attr("width" , div.width());
img.attr("height" , div.width() * imAR);
}else{
img.attr("height" , div.height());
img.attr("width" , div.height() / imAR);
}
div.css({
"overflow" : "hidden"
});
img.css({
"left" : (div.width() - img.attr("width"))/2,
"top" : (div.height() - img.attr("height"))/2
});
img.fadeIn();
};
和这个CSS:
.layout_container{
width: 100%;
overflow: hidden;
height: 100%;
position: absolute;
top: 0;
.layout{
width: 103%;
height: 100%;
position: absolute !important;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
min-height: 100%;
max-height: 100%;
margin-left: -0.5%;
.small_box{
width: 32%;
overflow: hidden;
height: 49%;
margin-right: 1%;
margin-bottom: 1%;
&.large_h{
height: 100%;
}
}
img{
display: none;
}
iframe{
width: 100%;
}
}
}
知道我该如何解决吗?
在窗口调整大小后,向浏览器添加一个调整大小事件,该事件再次对容器执行数学运算:
var globalResizeTimer = null;
$(window).resize(function() {
if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
globalResizeTimer = window.setTimeout(function() {
$.fittocontainer();
}, 200);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.