爲響應圖像

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的將導致（）的描述來隱藏..