jQuery - 동적으로 설정된 너비로 div에 이미지를 묶습니다.

Question

EDIT 1/27/12 11:32 am -이 스크립트와 관련된 모든 문제가 해결 된 것 같습니다. 나는 내가 왼쪽, 오른쪽 또는 그것을 중심으로두기를 원하는지에 따라 크기를 조정하려는 각 이미지에 CSS 클래스를 적용해야하지만 그걸로 살 수 있습니다. 내 최신 설명 및 데모보기 http://evanwebdesign.com/responsive-web-design/example5.html

1/27/12 10:50 am -이 스크립트에는 여전히 문제가 있습니다. 아래 내 의견을 참조하십시오. 수정 작업 중.

편집 1 월 27 일 오전 9:00 am : 이제이 문제가 거의 완료되었습니다. 내 예제를 http://www.evanwebdesign.com/responsive-web-design/example3.html으로보고 원래 예제와 비교하십시오.

현재 응답 창 이미지의 예는 http://evanwebdesign.com/responsive-web-design/example.html에 게시 된 브라우저 창의 너비에 따라 조정됩니다.

편집 1/16/12 : 나는 (희망) http://evanwebdesign.com/responsive-web-design/example2.html

에서 이해하지만 내 #content div의 내에서 여러 개의 이미지가 있다고 가정 쉽게 내 질문을하게하는 더 정교한 예를 만들었습니다? 그리고 그들이 모두 다른 너비라고 가정합시다. 수동으로 너비 값을 계산하고 모든 이미지에 대해 사용자 정의 클래스로 묶는 div를 생성하지 않으려 고합니다.

대신 다음 작업을 수행 할 것입니다 jQuery를 스크립트 작성하려는 각 이미지의 폭을 얻기 #content div의

내의 모든 이미지를

• 이동 (나는 실감 나는 그 이 경우에는 $ (window) .load()를 사용해야합니다. 그렇지 않으면 이미지 값 0으로 끝나야합니다.)

• 이미지의 너비를 픽셀 단위로 나누고 900으로 나눕니다. (900은 임의의 최대 너비입니다 패드 뒤 #content div의 픽셀 값 딩이 적용되었습니다.)

• 이전 단계에서 생성 한이 새 번호를 이미지 주변에있는 div가 포함 된 새 너비의 백분율로 적용하십시오.

목표는 동적으로 #content div의 내의 각 이미지에 대한 .home_photo의 사업부를 만드는 것입니다. 마크 업이 HTML에 나타나지 않으므로 CSS가 인라인으로 작성되는지는 신경 쓰지 않습니다.

이 질문이 명확한 지 또는 자신을 더 잘 설명하기 위해 할 수있는 다른 방법이 있으면 알려주십시오. 이 질문에 관련된 많은 단계가 있음을 압니다.

미리 도움 주셔서 감사합니다.

Answer 1

는 난 단지

<style> 
    .home_photo img 
    { 
     width:900px; 
    } 
</style> 

가 나는이 트릭을 할 것입니다 생각

편집

을 smthing 오해 알려줘 당신이 CSS를 사용하여이 작업을 수행 할 수 있다고 생각

$(function(){ 
    $(window).resize(function(){ 
     $("#container img").each(function(){ 
     if($("#content").width() < $(this).width()) 
     { 
      $(this).width($("#content").width()); 
     } 
     }); 
    }); 
}); 

Answer 2

나는 그것을 이해하므로, 각각을 포장하고 싶다. div의 이미지는 기본 #content div와 관련하여 이미지의 기본 크기를 기준으로 크기가 지정됩니다.

이 트릭을 수행해야합니다

당신은 window.load 언급

$(document).ready(function() { 
    var contentWidth = $('#content').width(); 
    $("#container img").each(function(){ 
     var ratio = $(this).width()/contentWidth; 
     $(this).wrap("<div style='width:"+ratio+"'></div>"); 
}); 

- $ (문서) 오히려 대기보다는 DOM이로드 된 후 즉시 실행하기 때문에 jQuery를 함께 사용하는 것이 더 나은 버전이 .ready를 로드 할 페이지의 모든 리소스 (예 : 이미지 포함).