Firefox：是否有任何替代 .css("zoom")答案

【问题标题】：Firefox: Is there any alternative to replace .css("zoom")Firefox：是否有任何替代 .css("zoom")
【发布时间】：2020-12-07 11:47:46
【问题描述】：

.css("zoom") 不适用于 Firefox 和 IE，但在 Chrome 上运行良好。

我的代码仅适用于 chrome：

//ZoomIn Button
    $('.zoom--actions .zoom-in').on('click', function() {
        if ( $(".img-zoom").css("zoom")==1){
            $(".img-zoom").css("zoom", "125%");
        }
        else if ( $(".img-zoom").css("zoom")==0.75){
            $(".img-zoom").css("zoom", "100%");
        }
    });

【问题讨论】：

标签： javascript html jquery css firefox

【解决方案1】：

CSS 缩放属性，支持 IE 5.5+、Opera、Safari 4 和 Chrome。

Firefox 是唯一不支持缩放的主流浏览器，但您可以从 Firefox 3.5 开始使用 -moz-transform。

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

让我们解决这个问题。

试试这个 sn-p。

$('.zoom--actions .zoom-in').on('click', function() {
  if ($(".img-zoom").css("zoom")==1 | $(".img-zoom").css({"-moz-transform":"scale(1)"})){
      $(".img-zoom").css("zoom", "125%").css({"-moz-transform":"scale(1.25)"});
  }
  else if (  $(".img-zoom").css("zoom")==0.75 | $(".img-zoom").css({"-moz-transform":"scale(0.75)"})){
      $(".img-zoom").css("zoom", "100%").css({"-moz-transform":"scale(1)"});
    
  }
});

.img-zoom{
  -moz-transform: scale(1);
  zoom:1;
}
.zoom--actions{
  margin:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="zoom--actions">
  <button class="zoom-in">Zoom</button>
  <img class="img-zoom" src="https://css-tricks.com/wp-content/themes/CSS-Tricks-17/images/browser-logos/chrome_64x64.png">
</div>

【讨论】：

在我的情况下，我如何将 -moz-transform 包含到我上面的代码中
@Abdelwahed SARJAMI, $('.img-zoom').css({ '-moz-transform' : 'scale(2)'});
我正在用可运行代码更新答案.. 稍等片刻。
看来-moz-transform 的行为与zoom 不同。它会裁剪元素，而不是放大所有内容，而是将它们保持在视野范围内。