CSS에서 '확대/축소'기능은 무엇입니까?

Question

나는 그들의 CSS 규칙에서 '줌'디스크립터를 사용하는 일부 jQuery 플러그인을 발견했다. 심지어 w3c 웹 사이트를 조사해 보았는데 그것이 확대 사용되었지만 어떻게 실제로 구현할 수 있는지 발견했다. 또는 일부 뷰포트를 정의해야합니까? 그런 뷰포트는 어떻게 정의합니까? 아니면 내가 뭘 잘못 했니?

은 가능한

a { 
    zoom:1; 
} 

a:hover { 
    zoom:2; 
} 

Answer 1

줌에 포함되지 않습니다 CSS 사양이지만 Internet Explorer, Safari 4, Chrome에서 지원됩니다 (Firefox 3.5에서 -moz-transform: scale(x)으로 약간 비슷한 효과를 얻을 수 있습니다). here을 참조하십시오.

그래서, 모든 브라우저

zoom: 2; 
zoom: 200%; 

2에 의해 개체를 확대 할 것이다, 그래서 크기를 두 배로 같다. 어떤 당신이

a:hover { 
    zoom: 2; 
} 

이 호버에서 <a> 태그가 200 %로 확대 할 경우 의미한다.

내가 말했듯이, FireFox 3.5+에서는 -moz-transform: scale(x)을 사용합니다.

편집 : thirtydot의 의견에 응답하여 scale()은 완전한 대체물이 아닙니다. zoom과 같이 온라인으로 확장되지는 않습니다. 오히려 그것은 다른 콘텐츠를 강요하지 않고 콘텐츠를 넘어서 확장됩니다. 이것을 here으로 보아라. 또한 zoom은 Opera에서 지원되지 않는 것으로 보입니다.

This post는 scale과 호환되지 않는 문제를 해결하는 방법과 jQuery를 사용하여 해결 방법에 대한 유용한 정보를 제공합니다.

Answer 2

만 IE와 웹킷 지원 줌처럼 사용하는 것입니다, 그리고 네, 정확히 수행 이론적으로 당신이 무슨 말을하는지.

은이 속성은 현재 요소의 배율 레벨을 제어 :

Answer 3

전체 효과의보고 이미지에 그것을 밖으로보십시오. 요소의 렌더링 효과는 카메라의 "줌"기능의 효과입니다. 이 속성은 상속되지 않지만 하위 요소 렌더링에 여전히 영향을줍니다.

예

여호수아 M는 지적과 같이, 줌 기능은 파이어 폭스에서 지원되지 않습니다,하지만 당신은 간단하게이 문제를 해결할 수

div { zoom: 200% } 
<div style=”zoom: 200%”>This is x2 text </div> 

Answer 4

:

div.zoom { 
    zoom: 2; /* all browsers */ 
-moz-transform: scale(2); /* Firefox */ 
} 

Answer 5

아무도 zoom: 1;이 IE6-7에 유용하다고 언급 한 사실에 놀라지 않고 hasLayout을 트리거하여 대부분의 IE 전용 버그를 해결할 수 있습니다. 여기서 전체 뷰포트 ("스크린")를 확대하기 위해 사용

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

바와 같이

Answer 6

크게는 @viewport 설명하는 CSS3 사양이다. 많은 브라우저에서 개인 요소를 확대/축소하지만 모든 요소가 확대되지는 않습니다.스케일이 이러한 효과를 달성하기 위해 사용되어야한다 :

http://www.w3.org/TR/css3-transforms/#transform-functions

을하지만이를 지원하는 브라우저의 '소자 크게'보다 약간 다른 작동 CSS3 변환 지정한다.

Answer 7

CSS zoom 현재 전체 브라우저 인구의 86 % 이상에서 속성이 광범위하게 지원됩니다.

참조 : http://caniuse.com/#search=zoom

document.querySelector('#sel-jsz').style.zoom = 4;

#sel-001 { 
 
    zoom: 2.5; 
 
} 
 
#sel-002 { 
 
    zoom: 5; 
 
} 
 
#sel-003 { 
 
    zoom: 300%; 
 
}

<div id="sel-000">IMG - Default</div> 
 

 
<div id="sel-001">IMG - 1X</div> 
 

 
<div id="sel-002">IMG - 5X</div> 
 

 
<div id="sel-003">IMG - 3X</div> 
 

 

 
<div id="sel-jsz">JS Zoom - 4x</div>