반응 형 이미지 용 반응 컨테이너

Question

현재 창 크기를 조정하면 이미지 크기가 조정되는 슬라이더가 있습니다. 이미지의 크기가 정교하지만 크기가 작아지면 슬라이더 컨테이너의 갈색 배경이 표시됩니다. 나는 갈색 배경이 전혀 나타나지 않도록 이미지와 함께 컨테이너의 크기를 조정할 수 있기를 원합니다.

현재까지 슬라이더 용 컨테이너의 높이는 설정되어 있습니다. 높이를 설정하지 않으면 슬라이드가 전환 될 때 컨테이너가 초당 높이 0으로 점프하여 레이아웃이 일그러지고 이동합니다. 슬라이더 컨테이너의 높이를 설정하지 않으면 크기가 재조정되지만 레이아웃 글리치가 발생합니다.

레이아웃 글리치가없고 배경색을 표시하지 않고 크기를 조정하는 슬라이더 컨테이너는 어떻게 사용할 수 있습니까?

다음

$(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의 일부입니다 : http://lab.stickywebz.com/plantsource/ 다음

내가 슬라이더를 위해 사용하고있는 자바 스크립트입니다 : 여기

는 슬라이더가 찾을 수있는 사이트에 대한 링크입니다

#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

320 이하의 minHeight는 설명을 발생할 수있는 div하기 때문에 = 320() 숨길의 minHeight 언급

일부 자바 스크립트를 변경하여 내 문제를 해결했습니다. 다음과 같이 슬라이더 영웅 영역에 대한 CSS의는 다음과 레이아웃이 여전히 동안 때문에 점프/글리치 된

$(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가 크기 조정 문제를 해결하지만, 다음과 같이 내가 자바 스크립트를 수정

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

슬라이드 전환을 포함하는 div는 비어 있으므로 높이가 0px가되고 표시는 none이됩니다. 컨테이너가 비어있는 원인은 javascript ... .hide() 및 fadeOut()에서 표시를 none으로 변경하여 레이아웃이 점프하는 것입니다. 그래서 내가 한 일은 .hide() 문을 모두 제거하고 fadeIn() 및 fadeOut() 대신 fadeTo를 사용하여 0으로 페이드하는 대신 0.01로 희미 해져서 여전히 모양을 제공합니다. 컨테이너를 비우지 않고 완전히 페이드 아웃합니다.

이제 컨테이너의 크기를 조정하고 전환하는 작업을 모두 완료했습니다.

Answer 2

추가 ID = "hero_content"이

같은 : 슬라이더 영역

이

<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"> 

같은 모든 이미지 태그 (완전히 4)에서 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에있어서, 리사이즈있다 쇼 ..