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

Question

我试图在用户单击链接时显示一个 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 然后缩放以适合窗口。谁能帮我解决这个问题？非常感谢!

Answer 1

您可以不使用缩放，而是将 div 的高度和宽度增加到 100%。为您创建示例 here