如何将像素值转换为比例？在Javascript或jquery中

Question

我必须在缩放操作中创建页面宽度

所以我的选择很少

<select id="scaleSelect" class="scale selectpicker" title="Zoom" onchange="zoomval();">
<option title="" value="I have to convert the page width to scale value"  id="page_fit">Page Width</option>
          <option title="" value="0.5"  >50%</option>
          <option title="" value="0.75">75%</option>
          <option title="" value="1">100%</option>
          <option title="" value="1.25">125%</option>
          <option title="" value="1.5">150%</option>
          <option title="" value="2">200%</option>
          <option title="" value="3">300%</option>
          <!-- <option title="" value="4">400%</option> -->
          </select>

我已经计算了屏幕宽度(1366px)，现在我必须转换成比例，我必须使用页面宽度选项。

我怎样才能做到这一点呢？

function zoomval(){
  console.log("Value changing")
  var page_f_val = $('#page_fit').val();
  var page_fit = $("#scaleSelect").val();
  if(page_fit == page_f_val){
    console.log("Value Matched")
    $('#viewer > div').map(function() 
        {       
    console.log(this.id)
    var pagecontainter_val = document.getElementById(this.id)
    console.log(pagecontainter_val)
    $("#"+this.id).css({"width":"100%"});

            //  if($("#"+this.id+"  #pdf-annotate-edit-overlay").length > 0)
            //  {
            //   document.getElementById(this.id).removeChild(document.getElementById('pdf-annotate-edit-overlay'));
            //  }
        });
  }



}

Answer 1

可以使用css属性进行放大或缩小

​

var max = 2, min=0.5,curZoom = 1;
function zoom(inc){
  curZoom+=(inc*0.1);
  $("#zoomable").css('zoom',curZoom);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='zoomable'><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wisconsin.svg"></div>


<button onclick='zoom(1)'>Zoom In</button>
<button onclick='zoom(-1)'>Zoom Out</button>

​