目前,我有一个滑块,其图像在调整窗口大小时会重新调整大小。图像可以重新调整大小,但是重新调整尺寸时会显示滑块容器的棕色背景。我希望能够随图像调整容器的大小,以使棕色背景完全不显示。

到目前为止,滑块的容器具有设定的高度。我设置高度是因为没有高度,当幻灯片在过渡时,容器会跳到高度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()隐藏。

09-30 18:32
查看更多