放大 div 的内部，更改内部元素而不是 div 本身

Question

我正在寻找一种放大 div 元素的方法。由于 this question 没有提供一些代码示例，我决定 post 以下内容。

This jsfiddle already helped, but as you can see in my adapted jsfiddle，整个div秤。我只想让里面的图像缩放。如果放大（也包括滚动条），div 应该会溢出。这是否可能不包含其他脚本，例如全景缩放？

HTML

<div id="pane">
  <img src="http://i.stack.imgur.com/oURrw.png">
</div>

JavaScript

$('#pane').bind('mousewheel DOMMouseScroll', function(e){
  var stage = $(this);
  scaleData = getZoom(stage);
  if ( e.originalEvent.detail < 0 ){
    setZoom( scaleData.curScale * '.9', stage );
  }
  else{
    setZoom( scaleData.curScale * '1.1', stage );
  }
});



function setZoom(scale, el){
  scale = Math.round(scale*10)/10;
  el.attr({
    style:
    'zoom: '+scale+';'+
    '-webkit-transform: scale('+scale+');'+
    '-moz-transform: scale('+scale+');'+
    '-o-transform: scale('+scale+');'+
    '-ms-transform: scale('+scale+');'+
    'transform: scale('+scale+');'
  });
}

function getZoom(el){
  var curZoom = el.css('zoom');
  var curScale = el.css('transform') ||
      el.css('-webkit-transform') ||
      el.css('-moz-transform') ||
      el.css('-o-transform') ||
      el.css('-ms-transform');
  if ( curScale === 'none' ){
    curScale = 1;
  }else{
    //Parse retarded matrix string into array of values
    var scaleArray = $.parseJSON(curScale.replace(/^\w+\(/,"[").replace(/\)$/,"]"));

    //We only need one of the two scaling components as we are always scaling evenly across both axes
    curScale = scaleArray[0];
  }
  return { curZoom: curZoom, curScale: curScale };
}

CSS

div#pane{
    height: 20em;
    margin: auto;
    background-color: #ffffff;
    overflow: scroll;
    position: relative;
    z-index: 0;
}

谢谢

Answer 1

如果我理解正确，解决方案是将您在 JSFiddle 中提供的 JS 的第二行更改为：

var stage = $(this).find('img');

我刚刚将 .find('img') 添加到您那里的内容的末尾。之前您缩放整个 div，现在它只缩放 img 标签。

放大 div 的内部，更改内部元素而不是 div 本身

Zoom inside of a div, changing the inner elements but not the div itself

javascript

jquery

zooming