为响应图像

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

我已通过更改一些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（）中，它将显示更改为无，导致布局跳转。所以我所做的就是将.hide（）语句全部删除，而不是使用fadeIn（）和fadeOut（），而是使用fadeTo而不是一直淡入0，我淡化为0.01，这仍然使它看起来像完全消失，但没有清空容器。

现在，我有容器大小和转换很好。

Answer 2

附加ID = “hero_content” 像这样

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

，并在每图像标记（共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"> 

添加ID = “图像”。

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..I重新定尺寸都提到了minHeight = 320因为低于320到了minHeight div的将导致（）的描述来隐藏..