如何缩放元素以适合屏幕

股利首先是非常小的，然后进行缩放以适合浏览器屏幕。

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

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

CSS

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

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 
})

我不知道如何创建一个小格，然后进行缩放以适合窗口。任何人都可以帮助我吗？非常感谢！

来源

2014-01-28 FlyingCat

而不是用规模，为什么不能你增加一个div的宽度和高度为100％？ –

如果是这样，我怎么开始一个较小的股利适合屏幕？ – FlyingCat

而不是使用规模，你可以增加股利的高度和宽度为100％。创建实例为您here

来源

2014-01-28 04:33:36

谢谢，这是有帮助的，你可以请帮助从较小的div开始，以适应屏幕呢？ +1 – FlyingCat

@FlyingCat检查更新后的链接 –

或者，您可以使用CSS转换来实现同样的事情：

HTML

<div class="wrapper"> 
    <div class="overlay"></div> 
</div>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
} 
.wrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    background: #294059; 
} 
.overlay { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    height: 0px; /* This can be... */ 
    width: 0px; /* ...any size you want */ 
    background: #562906; 
} 
.overlay.active { 
    height: 100%; 
    width: 100%; 
    -webkit-transition: all 1s; 
}

jQuery的

$('.wrapper').on('click', function() { 
    $('.overlay').toggleClass('active'); //Alternatively, add a dedicated 'close' button that removes the class 
});

这显然是一个非常基本的实现，但基本概念可以扩展以满足您的需求。另外，使用CSS转换的优点是您可以将jQuery的逻辑减少为在叠加容器上添加/删除类，并避免插入内联样式。

这里有一个Fiddle

来源

2014-01-28 04:39:56 monners

如何缩放元素以适合屏幕

回答

相关问题