CSS에서 '줌'은 무엇을합니까?

CSS에서 '줌'은 무엇을합니까?

---

일부 jQuery 플러그인의 CSS 규칙에서 '확대'설명자를 사용하고 w3c 웹 사이트를 살펴보고 확대하는 데 사용된다는 사실을 발견했지만 실제로 어떻게 구현할 수 있습니까? 아니면 뷰포트를 정의해야합니까? 그런 뷰포트를 어떻게 정의합니까? 아니면 내가 모든 것에 대해 틀렸습니까?

다음과 같이 사용할 수 있습니까?

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

---

Zoom은 CSS 사양에 포함되어 있지 않지만 IE, Safari 4, Chrome에서 지원됩니다 (그리고 -moz-transform: scale(x)3.5 이후 Firefox에서도 비슷한 효과를 얻을 수 있습니다 ). 를 참조하십시오 여기 .

따라서 모든 브라우저는

 zoom: 2;
 zoom: 200%;

개체를 2 배 확대하므로 크기를 두 배로 늘리는 것과 같습니다. 즉,

a:hover {
   zoom: 2;
}

마우스를 올리면 <a>태그가 200 % 확대됩니다.

내가 말했듯이 FireFox 3.5+ use -moz-transform: scale(x)에서는 거의 동일한 작업을 수행합니다.

편집 :의 의견에 대한 응답으로 완전한 대체가 아니라고 thirtydot말할 것 scale()입니다. 확장되지 않고 zoom다른 콘텐츠를 방해하지 않고 상자 밖에서 콘텐츠 위로 확장됩니다. 여기 에서 실제 동작을 확인 하십시오 . 또한 zoomOpera에서는 지원되지 않는 것 같습니다 .

이 게시물은 scalejQuery를 사용하여 비 호환성을 해결하는 방법과 해결 방법에 대한 유용한 통찰력을 제공합니다 .

---

hasLayoutzoom: 1; 을 트리거하여 대부분의 IE 전용 버그를 해결하기 위해 IE6-7에 유용하다고 아무도 언급하지 않았다는 사실 에 놀랐습니다 .

---

이 속성은 현재 요소의 확대 수준을 제어합니다. 요소의 렌더링 효과는 카메라의 "확대 / 축소"기능입니다. 이 속성은 상속되지 않더라도 자식 요소의 렌더링에 영향을줍니다.

예

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

---

zoom은 여기에 설명 된대로 @viewport 설명자에 대한 css3 사양입니다.

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

전체 뷰포트 ( '화면')를 확대하는 데 사용됩니다. 또한 많은 브라우저에서 개별 요소를 확대 / 축소하지만 전부는 아닙니다. css3는 이러한 효과를 얻기 위해 transform : scale을 사용해야한다고 지정합니다.

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

그러나 지원하는 브라우저의 '요소 확대 / 축소'와는 약간 다르게 작동합니다.

---

IE와 WebKit만이 확대 / 축소를 지원하며 이론적으로는 당신이 말하는 것을 정확히 수행합니다.

전체 효과를 확인하려면 이미지를 사용해보십시오. :)

---

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>

---

Joshua M이 지적했듯이 확대 / 축소 기능은 Firefox에서만 지원되지 않지만 다음과 같이 간단히 수정할 수 있습니다.

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

참고 URL : https://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css