拖放图像后，如何将图像缩放到 div 上的全尺寸？答案

【问题标题】：How to scale an image to the full size on a div after the image has been dragged and dropped?拖放图像后，如何将图像缩放到 div 上的全尺寸？
【发布时间】：2015-09-19 07:02:02
【问题描述】：

我想知道是否可以使用 JS / jQuery 将图像拖放到该 div 后自动缩放（放大）图像到 div 的完整大小？

*请注意，图像不会从其原始位置消失，而是将该图像的副本拖放到 div 中（所以它确实是我需要缩放的副本）。

我有当前的代码来拖放复制图像（见下文），但我不知道是否可以自动缩放，如果可以，如何...提前致谢！

    <html>
    <img id="drag1" src="image.jpg" draggable="true" ondragstart="drag(event)">
    <div id="dropBox" ondrop="dropcopy(event)" ondragover="allowDrop(event)"></div>
    </html>


    <style>
    #drag1{width:100px;height:50px;}
    #dropBox{width:500px;height:250px;}
    </style>


    <script>
    function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
    function dropcopy(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        var copyimg = document.createElement("img");
        var original = document.getElementById(data);
        copyimg.src = original.src;
        ev.target.appendChild(copyimg);
    }
    </script>

【问题讨论】：

创建JSFiddle 会更有帮助。

标签： javascript jquery html css image

【解决方案1】：

既然可以使用 CSS，为什么还要使用 jQuery？

img{width:100%;}

【讨论】：

【解决方案2】：

尝试用"text" 替换"Text" at ev.dataTransfer.getData("text"); , data for original.src copyimg.src = data; ，设置 style 属性 #dropBox img width 在 ev.target 上调用 window.getComputedStyle()

<html>
<img id="drag1" src="http://lorempixel.com/100/50" 
     draggable="true" ondragstart="drag(event)">
<div id="dropBox" 
     ondrop="dropcopy(event)" ondragover="allowDrop(event)"></div>
<style>
  #drag1 {
    width: 100px;
    height: 50px;
  }
  #dropBox {
    width: 500px;
    height: 250px;
    border: 1px dotted #000
  }
</style>
<script>
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

  function dropcopy(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var copyimg = document.createElement("img")
    copyimg.style.width = window.getComputedStyle(ev.target)
                          .getPropertyValue("width");
    var original = document.getElementById(data);
    copyimg.src = data;
    ev.target.appendChild(copyimg);
  }
</script>

</html>

【讨论】：