目前,我有一个滑块,其图像在调整窗口大小时会重新调整大小。图像可以重新调整大小,但是重新调整尺寸时会显示滑块容器的棕色背景。我希望能够随图像调整容器的大小,以使棕色背景完全不显示。
到目前为止,滑块的容器具有设定的高度。我设置高度是因为没有高度,当幻灯片在过渡时,容器会跳到高度0秒钟,从而使布局有点故障和移动。如果没有设置滑块容器的高度,则东西的大小会调整得很好,但是会出现布局故障。
如何不出现布局故障,而没有显示背景颜色的情况下重新调整大小的滑块容器?
这是可以找到滑块的站点的链接:http://lab.stickywebz.com/plantsource/
这是我用于滑块的JavaScript:
$(document).ready(function(){
ShowPostDiv(0);
});
function ShowPostDiv(divIndex)
{
$(".herocontent").hide();
if(divIndex >= $(".rotate_hide").length)
{
divIndex = 0;
}
var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml);
$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);
divIndex++;
setTimeout("ShowPostDiv("+divIndex+")", 8500);
}
$(document).ready(function(){
ShowPost();
});
这是我用于滑块区域的一些CSS:
#hero { width: 100%; position: relative; height: 450px; color: #fff; background-color: #bb9a71; overflow: hidden; }
.hero_img { width: 100%; }
.hero_img img { width: 100%; height: 100%; }
最佳答案
像这样添加id =“ hero_content”
<div id="hero_content" class="herocontent" style="display: block;">
并像这样在每个图像标签(总共4个)中添加id =“ image”
<img id="image" width="1800" height="450" src="http://lab.stickywebz.com/plantsource/wp-content/uploads/2013/08/HeroSlide1-1800x450.jpg" class="attachment-hero wp-post-image" alt="HeroSlide1">
。
function ShowPostDiv(divIndex)
{
$(".herocontent").hide();
if(divIndex >= $(".rotate_hide").length)
{
divIndex = 0;
}
var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml);
$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);
var widthdiv=$("#hero_content").width();
var heightdiv=$("#hero_content").height();
var diff=widthdiv/heightdiv;
if(heightdiv>320&&diff<3)
{
heightdiv=widthdiv/3;
if(heightdiv<320)
{
heightdiv=320;
}
$('#hero').height(heightdiv);
widthdiv=widthdiv+'px';
heightdiv=heightdiv+'px';
$('#image').attr('style','width:'+widthdiv+'!important;height:'+heightdiv+'!Important');
}
divIndex++;
setTimeout("ShowPostDiv("+divIndex+")", 8500);
}
该图像显示它已根据div调整大小。我提到过minheight = 320,是因为minheight低于div的320会导致description()隐藏。