2012-07-02 5 views
1

그래서 유동적 인 웹 페이지가 있습니다. 이 폭 부모 DIV있다 : 100 %, 스타일과 이미지 내부 :div로 중심을 옮기는 유체 동적 이미지 div로 즉시 크기 조정

<div> 
    <img src="image.png" alt="" /> 
</div> 

<style> 
    div{ width:100% } 
    img{ 
     display: block; 
     margin: auto; 
     max-width: 100%; 
    } 
</style> 

이미지 사업부를 중심으로한다. 이미지의 크기는 모르지만 상위 DIV보다 항상 작기 때문에 img 테두리에서 div 테두리까지 공백이 있습니다. 이제 브라우저의 크기를 조정하면 부모 DIV가 이미지의 경계에 도달 할 때까지 이미지의 크기가 조정되지 않습니다. 내가 브라우저 창 크기를 조정할 즉시 사업부로 확장이 이미지를 원하는

100 %, 다음은 실제 크기 이상으로 늘릴 것입니다 ... : 이미지 스타일의 폭을했을 경우

. 이미지 캔버스가 부모 div의 100 %가 될 경우 동작은 원했던 것입니다 (이미지가 100 % od div의 너비가되므로 이미지의 크기가 즉시 조정됩니다). 하지만

답변

2

내가 그것을 순수 CSS로 가능하다고 생각하지 않습니다 ... 이미지가 그렇게 할 수 없습니다,하지만 당신은 몇 가지 jQuery를 사용할 수 있습니다 - http://jsfiddle.net/UcV7y/

var ratio = $("img").parent().width()/$("img").width(); 

$(window).resize(function() { 
    $("img").width($("img").parent().width()/ratio + "px"); 
}); 
​ 
+0

매우 영리한 솔루션을. 나는 그것이 내 프로젝트에 잘 맞을 것이라고 생각한다. – marinbgd

+0

안녕 Zolthan, 나는 똑같은 문제를 가지고 있지만 거기에 바이블 스페이스에 이미지가 필요한 기능이 좀 더있다. 같은 솔루션에 대한 모든 솔루션, 만약 이미지 작물 변형 해상도에 대한 센터에서 다음 필요한 CSS를/js (스케일링 이미지와 짧은 채우기 부모 div)를 사용하여 가능한 방법을 모르겠다 .. 감사합니다. – bharat

+0

@ BharatBhatiya 당신이 명확히하시기 바랍니다 수 너는 가지고있는 문제 야? 바이올린을 만들고 정확히 무엇이 잘못되었으며 원하는 결과가 무엇인지 설명하십시오. –