Responsive container for responsive image

Question

Currently I have a slider with images that re-size when the window is re-sized. The images re-size fine, however it shows the brown background of the slider container when re-sizing smaller. I would like to be able to have the container re-size along with the image so that the brown background does not show up at all.

As of now, the container for the slider has a set height. I set the height because without a height, when the slides are transitioning the container jumps to height 0 for a second making the layout sort of glitch and move. Without the set height of the slider container, things re-size fine but the layout glitching occurs.

How can I have no layout glitching AND a slider container that re-sizes without showing the background color?

Here is the link to the site where the slider can be found: http://lab.stickywebz.com/plantsource/

Here is the javascript I am using for the slider:

$(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();
});

Here is some of the css I am using for the slider area:

#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

I have solved my problem by changing some of the javascript. The CSS for the slider hero area is as follows:

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

I modified the javascript as follows:

$(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();
});

The css fixed the resize issue but the layout was still glitching/jumping because during the slide transition, the containing div would be empty so it's height would go to 0px and display would be none. What was causing the container to empty was in the javascript... the .hide() and the fadeOut() which changes the display to none, causing the layout to jump. So what I did was remove the .hide() statement all together and instead of using fadeIn() and fadeOut(), I used fadeTo which instead of fading all the way to 0, I faded to 0.01 which still gives it the look of completely fading out but without emptying the container.

Now, I have both the container resizing and transitioning nicely.

Answer 2

add id="hero_content" like this

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

and add id="image" in every image tag(totally 4) like this

 <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); 
}

The image shows it has re-sized according to div..I have mentioned minheight=320 because minheight below 320 to div will cause the description() to hide..