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

Question

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

cssfirefoxcross-browserzoomingopera

85

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

zoom属性可以在IE、Google Chrome和Safari中使用，但在Firefox和Opera中无效。

是否有方法可以在Firefox和Opera中添加此属性？

- SABU

1

我会推荐你参考这个问题，它非常详细地回答了你的问题。 - Ben

12个回答

57

缩放和变换比例不是同一件事。它们应用的时间不同。缩放在渲染之前应用，变换在渲染之后应用。这意味着如果您使用宽度/高度= 100％的div嵌套在另一个具有固定大小的div中，如果应用缩放，则内部缩放中的所有内容将收缩或扩大，但如果应用变换，则整个内部div将收缩（即使宽度/高度设置为100％，在变换后也不会是100％）。

- Ilya Volodin

41

对我而言，以下这段代码可以解决缩放转换时的差异，并且可以根据预期的原点进行调整:

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

- Russ K.

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的包装器。在样式内容时要注意这一点。

- user669677

你可以通过处理缩放元素的边框宽度，使其更加出色。 .width($(this).data('originalWidth') * x + borderWidth) - umutesen

7

我会在所有情况下将 zoom 更改为 transform，因为正如其他答案所解释的那样，它们并不等同。在我的情况下，还需要应用 transform-origin 属性来将项目放置在我想要的位置。

这对我在 Chrome、Safari 和 Firefox 中都有效：

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

- Alvaro

transform和-moz-transform是互斥的。transform和transform-origin对我有用。谢谢！ - JRichardsz

@JRichardsz 真的吗？但是Firefox支持transform。为什么两者都需要？https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale - johny why

Mozilla 2022 105.0（64位）https://i.ibb.co/YWZdwXJ/mozilla-scale.png 如果您使用其中一个，则另一个将被忽略或禁用。 - JRichardsz

4

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

使用这个可以更加安全可靠。

- Divam Gupta

11

这会在 Webkit 中以 2 倍的缩放比例进行缩放。首先是缩放，其次是按比例缩放。 - Ales Ruzicka

3

我尝试解决这个问题已经一段时间了。Zoom 明显不是解决方案。它在谷歌浏览器上可以工作，在IE上只能部分工作，还会移动整个HTML div；而在火狐浏览器上根本没有效果。

我的解决方案是同时使用缩放和平移，并添加原始高度和宽度，然后设置div本身的高度和宽度：

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

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

- WtFudgE

2

这是唯一正确的答案！仅缩放不改变元素的原始尺寸。 - Honza Zidek

这是唯一一个帮助我解决问题的答案，我的问题是我想在保持相同宽度的同时缩放元素的大小，以便更多的较小元素适合同一行。我所要做的就是将CSS宽度%按比例反比于CSS比例因子进行缩放。 - Stu Blair

2

唯一正确且符合W3C标准的答案是：使用<html>元素并使用rem单位。如果你缩小比例（例如scale(0.5)），转换将无法正常工作。

使用：

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

在您的代码中使用“rem”单位（包括<body>样式），而不是公制单位。 "%"不需要更改。对于所有背景，请设置background-size。为body定义字体大小，该大小可被其他元素继承。

如果发生任何应触发缩放而不是1.0的情况，请更改标记的字体大小（通过CSS或JS）。

例如：

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

这样做相当于使用zoom:0.5，在JS和拖放事件期间使用clientX和定位时没有问题。

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

实际上你并不需要缩放，但在某些情况下它可以是现有网站的更快的方法。

- 18C

1

在所有浏览器中，它的工作方式并不统一。

我访问了http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage，并添加了缩放和-moz-transform样式。我在Firefox、IE和Chrome上运行了相同的代码，得到了三个不同的结果。

<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>

- Ronny Sherer

1

尝试在FireFox中使用以下代码来缩放整个页面

-moz-transform: scale(2);

如果我使用这段代码，整个页面会随着y和x滚动而不是适当的缩放。

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

**

在Firefox中，你无法使用CSS缩放页面。

**

- Rizwan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mubeen · Accepted Answer

79

试试这段代码，它会起作用：

-moz-transform: scale(2);

您可以参考这个链接。

- Mubeen

2

是的，这个运作得非常完美。有没有一种方法可以将-moz-transform缩放因子更改为百分比？ - user407283

这是一个以十进制形式表示的百分比。（1 = 100％，2 = 200％，0.2 = 20％）。但我相信您也可以使用百分号表示法。http://www.w3.org/TR/css3-values/#percentages - sholsinger

58

问题在于当你有固定位置元素时。缩放的方式与变换比例不同。 - Tom Roggero

3

当Firefox支持缩放功能时会发生什么？这会使缩放倍数翻倍吗？我认为这不是解决方案。 - Cory Mawhorter

这个在精灵图像上不起作用，因为我们实际上需要放大图像的特定部分。 - colin rickels

同时在2010年。 - Andrija