我正在创建一个响应式照片和文本滑块,使用外部包装器缩放水平图像以获得大窗口大小,然后使用溢出:隐藏带负边距((wrapperWidth - imageWidth)/ 2)和图像最大宽度小窗口尺寸为400%。这允许显示中央裁剪的肖像图像。
<div class="slider">
<ul class="slides">
<li><a href=""><img alt="" src="image.jpg"/></a>
<div class="caption">
<h2><a href="">Large Caption</a></h2>
<p><a href="">Small Caption</a></p>
</div>
</li>
etc.etc.
</div>
.slider .slides li{
width: 100%;
overflow: hidden;
}
.slider .slides img{
max-width: 400%;
}
etc.
$(window).resize(function(){
var container = $('.slider');
imageWidth =container.find('.slides img').width();
wrapperWidth =container.find('.slides').width();
margin = (wrapperWidth - imageWidth) / 2;
container.find('.slides img').css('margin-left', margin)
});
问题
设置在页面加载时效果很好但是在调整浏览器窗口大小时,Jquery似乎在随机时间松开图像宽度(返回0),同时仍然正确地计算包装器宽度。然后,这会计算出不正确的边距值,并且不会使图像居中。
知道为什么会这样吗?
答案 0 :(得分:0)
我认为这会奏效。我没有测试过:
$(function() {
$(window).on("resize", function()
{
var container = $(".slider");
imageWidth =container.find(".slides img:eq(0)").width();
wrapperWidth =container.find(".slides").width();
margin = (wrapperWidth - imageWidth) / 2;
container.find(".slides img").css({"margin-left": margin})
});
});