div를 100 % 너비로 유지하면서 메뉴를 망가지지 않고

Question

첫째, 나는 새롭다. 내가 my site. 그러나

에 정말 멋진 '스크롤 스크립트에 페이드'를 구현했습니다

은, 내가 뭘 찾고 있어요 것은 fastcocreate's 사이트와 같은 상위 범위 100 % 폭으로 이미지를 가지고있다.

이

내가 함께 일하고 있어요 사업부입니다 :

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% 560px;"> 
</div> 

지금은 추가 해봤 '배경 - 크기 : 100 % 자동;' div에, 속임수를 쓰지 만, 이것이 내 텍스트에 이상한 일을하는 것을 제외하고는. 예를 들어 브라우저를 더 슬림하게 만들면 텍스트가 함께 움직이지 않아서 그 아이디어를 폐기했습니다.

다음으로 'background-size : 100 % 560px;'로 변경했습니다. 이 문제를 해결했습니다. 그러나 다른 하나는 브라우저를 작게 만들 때 이미지를 과도하게 만들거나 더 넓게 만들 때 이미지를 늘리는 것입니다.

나는 위의 것과 더 가깝다고 느낍니다. 그러나 나는 이미지 문제에 대한 해결책을 찾고 있습니다. 현재 크기보다 큰 이미지를 업로드해야합니까?

앞서 말씀 드렸듯이 these guys은 좋은 직장입니다.

Answer 1

당신이

min-width: 100%; 
height: auto; 

을 시도, 자신의 이미지에 최소 폭 설정하고 그 fastocreate를 나타납니다?

최고의

을 무엇 fastocreate

임 확신 그게 전부, -b

은 * 또한, 브라우저의 "요소 검사"가능하게하려고합니다. 다른 사람의 스타일을 반영하려고 할 때 매우 유용합니다.

편집 : 귀하의 코멘트에 응답

, 당신은 크기를 조정할 것 jQuery를 기능을 시도 할 수 있습니다. 그런 예를

function resize(){ 
    var height = $('img').width/2; //sets variable height to the width divided by 2 
    $('img').height(height); // sets the value of the height to the variable height 
}; 

또는 뭔가

.