2012-06-07 3 views
15

100 % 너비로 div를 축소하는 데 관심이 있습니다. 내가 겪고있는 문제는 요소를 스케일 아웃하여 고정 폭을 얻었을 때 더 이상 너비의 100 %를 확장하지 않는 경우입니다.CSS 100 % 너비의 요소 배율

예 - http://jsfiddle.net/Fz7qh/2/

(변환 반대 : 규모) 나는 CSS 줌 속성을 사용하여이 예상대로 작동하지만 줌 속성이 잘 지원되지 않습니다 들었어요. 제 질문은 CSS 변형 스케일로 달성 할 수 있습니까?

+0

CSS의는'zoom' 속성이 실제로 제대로 지원 . Firefox 나 Opera 모두 지원하지 않습니다. – thirtydot

+0

당신이 쫓아 온거야? http://jsfiddle.net/thirtydot/Fz7qh/5/ – thirtydot

+0

@thirtydot 재미있는 아이디어. 일하는 것 같습니다. 답변을 게시하면 받아 들일 수 있습니다. – levi

답변

34

zoom 속성이이 경우에, 당신은 -transform-origin: 0 0;를 추가하고 설정할 수 있습니다 무엇을 모방 width (100/0.7 ~= 142.857143) oldWidth/newScale에 :

http://jsfiddle.net/thirtydot/Fz7qh/5/

div.zoomed { 
    -webkit-transform: scale(.7); 
    -webkit-transform-origin: 0 0; 
    width: 142.857143%; 
}​ 
+5

왜 일부 사람들은 대답을 받아들이지만 upvote를주지 않는지 궁금합니다. 답변이 맞습니까 만 충분하지 않습니까? –

+0

방금'box-sizing : border-box; '를 추가하여'padding'도'width'에도 포함되어 있는지 확인하려고합니다. –

+0

나는이 두 줄의 upvotes를 줄 수 있다면 – Johannes