javascript - 响应式图像的响应式容器

Question

目前我有一个带有图像的 slider ，当窗口调整大小时它会调整大小。图像调整大小很好，但是当调整较小时它显示 slider 容器的棕色背景。我希望能够随图像一起调整容器大小，以便根本不会显示棕色背景。

截至目前， slider 的容器具有设置的高度。我设置高度是因为没有高度，当幻灯片过渡时容器会跳到高度 0 一秒钟，从而使布局出现故障并移动。如果没有设置 slider 容器的高度，可以很好地调整大小，但会出现布局故障。

我怎样才能没有布局故障和调整大小而不显示背景颜色的 slider 容器？

这是可以找到 slider 的站点的链接:http://lab.stickywebz.com/plantsource/

这是我用于 slider 的 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();
});

这是我用于 slider 区域的一些 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%; }

Answer 1

像这样添加 id="hero_content"

<div id="hero_content" class="herocontent" style="display: block;">

然后像这样在每个图片标签中添加 id="image"(总共 4 个)

 <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，因为 div 的 minheight 低于 320 会导致 description() 隐藏。