图片旋转放大居中

funnyF2E
  • 788

屏幕中间有一个宽高未知的图片,点击旋转或放大按钮时,如何让图片始终在屏幕中间?
ps:代码如下,为什么还是不能居中,这有什么问题么?

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
        *{padding:0; margin:0;}
        html,body{height:100%; position: relative;}
        img{border:0; vertical-align: middle;}
        #box{ position:absolute;} 
    </style>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var width ='',
                height = '',
                src='images/123.jpg';
            $('#boxImg').attr('src',src);
            var img = new Image();
            img.src = src;
            img.onload = function(){
                width = img.width;
                height = img.height;
            };

            $('#box').css({
                'width':width+'px',
                'height':height+'px',
                'marginLeft':-width/2+'px',
                'marginTop':-height/2+'px',
                'top':50+'%',
                'left':50+'%'
            });
        });
     </script>
</head>
<body>
    <div id="box">
        <img id="boxImg" src="" alt="">
    </div>
</body>
</html>
回复
阅读 3.6k
3 个回答

css3 translate配合position absolute

以前postion:absolute + 50% + 负margin的方式一样适用
只不过有css3可以把负margin改为translate(-50%,-50%)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style>
    body,html{
        height:100%;
    }
    #test{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    #myimg{
        background-color:#f00;
        transform: scale(1.5);
    }
    </style>
</head>
<body>
    <div id="test">
        <div style="width:300px;height:200px" id="myimg">
    </div>
</body>
</html>

动画,矩阵变换…改变中心点

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏