如何增加和减少图像尺寸

Question

我有一个图像，其宽度设置为200px ，高度设置为200px 。 对于图片的每次点击，其宽度和高度应增加50px ，当宽度和高度达到500px ，其宽度应减小50px ，当其变为200px时，其高度应再次增大50px ，依此类推。 我怎样才能做到这一点？

以下代码对我不起作用：

function Increase_Decrease() {
    var w = document.getElementById("img").width;
    var h = document.getElementById("img").height;
    if (w <= 500 && h <= 500){
        var w = document.getElementById("img").width += 50;
        var h = document.getElementById("img").height += 50;
    } else {
        var w = document.getElementById("img").width -= 50;
        var h = document.getElementById("img").height -= 50;
    }   
}

Answer 1

你需要存储变焦的状态-用户是否正在放大或 缩小 ，并根据您指定的范围，改变变焦状态。

 const $image = document.querySelector('#image'); const delta = 50; let zoom = +1; $image.onclick = function() { const height = $image.getBoundingClientRect().height; // or $image.height if (height >= 500) { zoom = -1; } else if (height <= 200) { zoom = +1; } $image.height += zoom * delta; } 

 <img src="https://media1.tenor.com/images/9f8deeccdee39a5ed36a0a7ecfa3a1a8/tenor.gif?itemid=10044706" height="200" id="image" /> 

另外，请记住，你并不需要同时调整宽度和高度的图像。 缩放宽度会自动缩放高度，反之亦然，以保持纵横比 。

Answer 2

您的问题是，您没有跟踪要走的路，只是将其保持在中间，一旦碰到任一边，就需要翻转开关以知道要走的路。

在这里，我使用state作为开关。

 const INCREASE = true const DECREASE = false let state = INCREASE function Increase_Decrease() { const img = document.getElementById('img') if (state === INCREASE) { img.width += 50 img.height += 50 if (img.width >= 500) { state = DECREASE } } else { img.width -= 50 img.height -= 50 if (img.width <= 200) { state = INCREASE } } } 

 button { position: absolute; } 

  <!DOCTYPE html> <html> <body> <button onclick="Increase_Decrease()">Click me</button> <img id="img" src="https://dummyimage.com/600x400/000/fff" alt="Smiley face" width="42" height="42"> </body> </html> 

Answer 3

试试这个。

 var onIncrease = true; function IncDec() { var x = document.getElementById("myImg"); if (onIncrease) { x.width += 50; x.height += 50; } else { x.width -= 50; x.height -= 50; } if (x.width == 500) onIncrease = false; if (x.width == 200) onIncrease = true; console.log("width: ", x.width, "height: ", x.height); } 

 <!DOCTYPE html> <html> <body> <img id="myImg" onclick="IncDec()" src="https://vignette.wikia.nocookie.net/simpsons/images/0/01/200px-Langdon_Alger.png/revision/latest?cb=20120815160236" alt="The Pulpit Rock" width="200" height="200"> </body> </html> 

Answer 4

试试这个。 我希望这能帮到您。 无需设置高度，因为高度会根据宽度自动调整。

 <html> <head> <script> var zoomIn = true, zoomOut = false; function Increase_Decrease(){ var w = document.getElementById("img").width; var h = document.getElementById("img").height; if(w == 500) { zoomIn = false; zoomOut = true; } else if(w == 200) { zoomIn = true; zoomOut = false; } if(zoomIn && w <= 500) { var w1 = document.getElementById("img").width = w + 50; } else if(zoomOut && w > 200) { var w1 = document.getElementById("img").width = w - 50; } console.log(w,h); } </script> </head> <body> <div> <img id="img" onclick="Increase_Decrease()" src="https://placeimg.com/200/200/animals" alt="img"> </div> </body> </html>