[css] Firefox 및 Opera에서 HTML 요소를 확대하려면 어떻게해야합니까?

Question 1

Firefox 및 Opera에서 HTML 요소를 확대하려면 어떻게해야합니까?

이 zoom속성은 IE, Google Chrome 및 Safari에서 작동하지만 Firefox 및 Opera에서는 작동하지 않습니다.

이 속성을 Firefox 및 Opera에 추가하는 방법이 있습니까?

Question 2

이 코드를 시도하면 작동합니다.

-moz-transform: scale(2);

이것을 참조 할 수 있습니다 .

Question 3

확대 / 축소 및 변환 배율은 동일하지 않습니다. 그들은 다른 시간에 적용됩니다. 렌더링이 발생하기 전에 확대 / 축소가 적용됩니다. 그 결과 너비 / 높이 = 다른 div 내부에 100 % 중첩 된 div를 고정 크기로 가져 오면 확대 / 축소를 적용하면 내부 확대 / 축소 내부의 모든 것이 축소되거나 커지지 만 적용하면 전체를 변환합니다. 내부 div가 축소됩니다 (폭 / 높이가 100 %로 설정되어 있어도 변환 후에는 100 %가되지 않습니다).

Question 4

나를 위해 이것은 확대 / 축소 및 배율 변환의 차이를 상쇄하기 위해 작동하며 원하는 원점을 조정합니다.

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Question 5

scale대신 사용하십시오 ! 많은 연구와 테스트를 거친 후 브라우저 간을 달성하기 위해이 플러그인을 만들었습니다.

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

usege :

$(selector).scale(0.5);

노트:

클래스와 함께 래퍼를 만듭니다 scaleContainer. 콘텐츠를 스타일링하는 동안 처리하십시오.

Question 6

zoom: 145%;
-moz-transform: scale(1.45);

이것을 사용하여 더 안전한쪽에

Question 7

다른 답변에서 설명했듯이 동일하지 않기 때문에 모든 경우에 대해 변경 zoom합니다 transform. 내 경우 transform-origin에는 내가 원하는 곳에 물건을두기 위해 재산을 적용하는 것도 필요 했습니다.

이것은 Chome, Safari 및 Firefox에서 나를 위해 일했습니다.

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Question 8

모든 브라우저에서 균일하게 작동하지 않습니다. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage에 가서 zoom 및 -moz-transform에 대한 스타일을 추가했습니다. firefox, IE 및 chrome에서 동일한 코드를 실행하여 3 가지 다른 결과를 얻었습니다.

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>