如何在Firefox和Opera中缩放HTML元素?


82

如何在Firefox和Opera中缩放HTML元素?

zoom属性可以在IE,Google Chrome和Safari中使用,但不能在Firefox和Opera中使用。

有什么方法可以将此属性添加到Firefox和Opera?


1
我想请您回答这个问题,它可以彻底回答您的问题

Answers:


80

试试下面的代码,它将起作用:

-moz-transform: scale(2);

你可以参考这个


2
是的,这很完美。是否有任何方法可以将-moz-transform缩放比例更改为百分比

十进制形式的百分比。(1 = 100%2 = 200%0.2 = 20%)但是我相信您也可以使用百分比符号。w3.org/TR/css3-values/#percentages
sholsinger

45
问题是当您有固定的位置元素时。缩放的方式与变换比例的方式不同。
汤姆·罗杰罗

3
另外...当ff支持缩放时会发生什么?请问这个双倍变焦?这似乎不是解决方案imo。
2013年

尽管实际上我们需要放大图像的特定部分,但这不适用于Sprite图像。
colin rickels '18

52

缩放和缩放比例不一样。它们在不同的时间应用。在渲染发生之前应用缩放,然后进行转换。这样的结果是,如果您将一个宽度/高度= 100%的div嵌套在另一个div内,并且具有固定的大小,则如果应用缩放,则内部缩放中的所有内容都会缩小或增长,但是如果应用,则变换整个inner div会缩小(即使将width / height设置为100%,也不会在转换后变为100%)。


35

对我来说,这可以抵消缩放和缩放变换之间的差异,并针对所需的原点进行调整:

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

8

使用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);
};

使用:

$(selector).scale(0.5);

注意:

它将创建一个带有类的包装器scaleContainer。在设置内容样式时要注意这一点。


你甚至可以更真棒通过处理缩放元素的边框宽度使这个...width($(this).data('originalWidth') * x + borderWidth)
umutesen

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

使用它是为了更安全


10
这会将webkit放大2倍。缩放拳头,缩放秒针
Ales Ruzicka

5

在所有情况下,我都会更改zoomtransform因为正如其他答案所解释的,它们并不等效。就我而言,也有必要申请transform-origin财产,将物品放在我想要的地方。

这在Chome,Safari和Firefox中对我有用:

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

1

并非在所有浏览器中都以统一的方式工作。我去了:http : //www.w3schools.com/html/tryit.asp? filename=tryhtml_pulpitimage并添加了缩放和-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>

1

我已经对此发誓了一段时间。缩放绝对不是解决方案,它可以在chrome中使用,它在IE中可以部分使用,但是可以移动整个html div,firefox不能执行任何操作。

对我有用的解决方案是同时使用缩放和平移,还添加原始高度和权重,然后设置div本身的高度和权重:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

显然将这些更改为您自己的需求。在所有浏览器中,它给我相同的结果。


这是唯一正确的答案!仅靠比例就可以保持元素的原始大小不变。
Honza Zidek

1

尝试使用此代码在fireFox中缩放整个页面

-moz-transform: scale(2);

如果我使用此代码,则整个页面用y和x缩放无法正确缩放

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

简而言之,您无法在fireFox中使用CSS缩放页面

**


0

对您来说正确吗?:

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

0

对我来说,这与IE10,Chrome,Firefox和Safari搭配使用效果很好:

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

这会将所有内容放大到50%。


0

唯一正确且与W3C兼容的答案是:<html>object和rem。如果缩小比例,转换将无法正常进行(例如scale(0.5)。

使用:

html
{
   font-size: 1mm; /* or your favorite unit */
}

并在您的代码“ rem”单位(包括中的样式<body>)中使用公制单位。“%”没有变化。为所有背景设置background-size。定义主体的字体大小,该大小由其他元素继承。

如果发生任何情况将触发除1.0以外的缩放,请更改标签的字体大小(通过CSS或JS)。

例如:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

这使得zoom:0.5等效,而在使用clientX的JS中没有问题,并且在拖放事件期间没有定位。

不要在媒体查询中使用“ rem”。

您确实不需要缩放,但是在某些情况下,它可以更快地处理现有网站。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.