鍍金池/ 問答/HTML/ 【求助】div里的圖片怎么實現(xiàn)中心放大效果?

【求助】div里的圖片怎么實現(xiàn)中心放大效果?

參考https://www.jb51.net/article/...,修改了代碼如下:
但是出來的效果是左上開始的放大的效果
怎么在div里的img實現(xiàn)中心的放大效果呢?

<script type="text/javascript">
function fangda(){
    var pic=$('.pictures img');
    var wValue=20+pic.width();
    var hValue=20+pic.height();
    pic.animate({width: wValue, height: hValue, left:("-"+(0.5 * pic.width())/2), top:("-"+(0.5 * pic.height())/2)}, 1000);
}
</script>
<body>
<button onclick="fangda()">圖片放大</button>
<style>
.pictures {
    width: 414px;
    height: 390px;
    overflow: hidden;
}    
</style>
<div class="pictures">
    <img src="3.jpg">
</div>
回答
編輯回答
忘了我

推薦使用css transform: scale(2)

2017年8月11日 13:57
編輯回答
帥到炸

試試transform-origin: center

2017年7月7日 01:46