javascript - 如何缩放元素以适合屏幕

我试图在用户单击链接时显示div。

div首先会很小，然后进行缩放以适合浏览器屏幕。

到目前为止，我有一些东西。

<a id='btn' href='#' ><img src='test.png' /></a>

的CSS

.test1{
    position: absolute;
    transition:all 1s ease-in;
    -webkit-transition:all 1s; /* Safari */
}

js

var contentDiv = document.createElement('div');
var img        = document.createElement('img');

contentDiv.setAttribute('class','test1');

img.src='newimg.png';
contentDiv.appendChild(img);

$("#btn").on('click', function(e){
   $('body').append(contentDiv)
   var setW = $(contentDiv).width()/2
   var setH = $(contentDiv).height()/2
   var xPos = e.pageX - setW
   var yPos = e.pageY - setH
   $(contentDiv).css('transform', 'scale(.1)') //first very small
   $(contentDiv).css({top: yPos, left: xPos, 'transform': 'scale(2)'}) //second fit the screen
})

我不确定如何创建一个较小的div，然后缩放以适合窗口。有人可以帮我吗？非常感谢！

最佳答案

除了使用比例尺，您还可以将div的高度和宽度增加到100％。为您创建的示例here

关于javascript - 如何缩放元素以适合屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21396760/