나는 재단 CSS를 사용하여 (http://foundation.zurb.com/index.html) 그리고 내 레이아웃이 모두 완료했습니다. 응답이 충만한 페이지입니다.IE 및 window.resize에 div를 크기 조정
가장 큰 문제는 반응 형 DIV 배경 이미지와 높이입니다. 기본적으로 나는 전체 너비 행을 가지고 있는데, 그 안에는 중첩 된 행이 2 (50/50)로 나뉘어져 있습니다. 예 :
<div class="row"><!-- full row -->
<div class="large-6 columns bgimg resizeit">row one with BG image</div><!-- left box -->
<div class="large-6 columns setboxtall"> <!-- right box -->
<!-- MSG-MSG -->
<div class="valignmiddle center-it">
<p>EVENTS | EL PASO</p>
<h2>Event one</h2>
<h3>MAY 26 - 27, 2014</h3>
<hr class="block-divider" />
<h4> Neque porro quisquam </h4>
</div>
<!-- MSG-MSG -->
</div>
</div>
이제 왼쪽 상자에 배경 이미지를보기 위해, 나는 오른쪽에있는 상자의 높이로 크기를 조정할 수있는 방법이 필요했습니다.
그래서 난 그냥 그렇게 JQuery와 스크립트가 있습니다var resizeDiv = function() {
var maxHeight = 0;
$(".setboxtall").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".resizeit").height(maxHeight);
};
$(document).ready(resizeDiv);
$(window).resize(resizeDiv);
이 기본적으로 코드를 간다,라는 클래스 setboxtall를 검색 한 다음 DIV라는 resizeit에 그 높이를 적용합니다.
BG 이미지를 적용하기 위해 백 스트레치 (http://srobbin.com/jquery-plugins/backstretch/)를 사용하고 있습니다. 훌륭하게 작동합니다.
<script>$(".bgimg").backstretch("img/background/indian.jpg");</script>
이 기능은 Firefox, Chrome 및 Safari에서 잘 작동합니다. 그러나 IE는 브라우저의 크기가 조정될 때까지 배경 이미지로 div를 채우지 않습니다. IE 크기를 조금이라도 조정하면 작업이 완료됩니다.
페이지가로드 될 때 IE에서 (IE10btw를 사용하여) 해당 div에 배경 이미지를 표시하려면 어떻게해야합니까?
나는 모든 종류의 것을 시도했지만, 내 문제는 div와 브라우저의 JS 및 크기 조정 이벤트와 분리되어 있습니다.
더 좋은 방법이 있으면 처리해주세요.
나는이 페이지의 2-6 인스턴스가 어디에도 없다고 언급해야합니다. 그래서 특정 div 클래스를 대상으로 할 수 있어야합니다. (높이 오른쪽 상자에 텍스트의 양에 따라, 동적)
감사