响应式图像的响应容器

Question

目前我有一个滑块，其中的图像会在重新调整窗口大小时重新调整大小。图像重新调整大小，但是当重新调整尺寸时，它会显示滑块容器的棕色背景。我希望能够将容器与图像一起重新调整大小，以便棕色背景根本不显示。

截至目前，滑块的容器具有设定高度。我设置高度，因为没有高度，当幻灯片过渡时，容器跳跃到高度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%; }

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因为低于320到div的minheight将导致description（）隐藏..

Answer 2

我通过更改一些javascript解决了我的问题。 滑块英雄区域的CSS如下：

.hero_img {width: 100%; }
.hero_img img { width: 100%; height: 100%; }

我修改了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);
$(".herocontent").fadeTo(1000,1).delay(6500).fadeTo(1000,0.01);

divIndex++;
setTimeout("ShowPostDiv("+divIndex+")", 8500);
}
$(document).ready(function(){
   ShowPost();
});

css修复了调整大小问题，但布局仍然是毛刺/跳跃，因为在幻灯片过渡期间，包含的div将为空，因此它的高度将变为0px并且显示为无。导致容器空的原因是在javascript ... .hide（）和fadeOut（）中将显示更改为none，导致布局跳转。所以我所做的是一起删除.hide（）语句，而不是使用fadeIn（）和fadeOut（），我使用fadeTo而不是一直淡入0，我褪色到0.01仍然给它的外观完全淡出但没有清空容器。

现在，我已经对容器进行了大小调整和转换。