如何放大并居中一张图片？

Question

如何放大并居中一张图片？

javascriptcsszooming

10

有没有想法用 javascript 和 css 在特定点上放大图片? 我在使用基于 webkit 的浏览器。

我可以通过指定缩放属性来进行缩放，例如 `elem.style.zoom="150%"，主要问题是我无法将图片居中到我想要的放大位置。我可以通过鼠标点击获取我想要放大的点。

- sat

你是想使用HTML/CSS方法简单缩放它，还是也想重新从服务器加载适当缩放的图片？ - Boldewyn

据我所知，缩放属性并未标准化，因此它不会跨浏览器兼容。 - Andy E

不，我只想要CSS / JavaScript解决方案，不需要与服务器进行交互。 - sat

图片的尺寸大小总是固定的吗？ - Vladimir Starkov

3个回答

3

需要完成的任务：

获取图片内点击位置的坐标。这看起来很简单，但实际上并不是，因为事件的pageX和pageY属性记录的是相对于整个文档的坐标。要计算出点击在图片内部的具体位置，你需要知道图片在文档中的位置。但是，你还需要考虑它所有父元素的位置以及它们的相对/绝对/静态定位等情况，这会变得非常混乱。
计算新的中心点（按比例缩放后的点击位置 - 容器的左上角位置）
按比例缩放图片并将容器滚动到新的中心点

如果你不介意使用jQuery，则可以使用以下代码（已测试）：

<script type="text/javascript">
        $(document).ready(
            function(){
                $('#Container img').click(
                    function( event ){
                        var scale = 150/100;
                        var pos = $(this).offset();
                        var clickX = event.pageX - pos.left;
                        var clickY = event.pageY - pos.top;
                        var container = $(this).parent().get(0);

                        $(this).css({
                                        width: this.width*scale, 
                                        height: this.height*scale
                                    });

                        container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
                        container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
                    }
                );
            }
        );
</script>

和所需的HTML

<div id="Container">
   <img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" />
</div>

- Gabriele Petrioli

当您将我的代码转换为jQuery时，至少可以保留我的变量名称呀:P - Andy E

哈哈，我在编程时必须感觉到直观，但之后从未记得调整它... 哦好吧... 这是作业 ;) - Gabriele Petrioli

1

在下面的代码中，图像会在鼠标点击点处放大 - 图像被放大了，但是您单击的点仍位于鼠标指针下方，并且框架的大小保持不变。右键单击以返回原始显示比例。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <style>
        div {
          width: 400px;
          height: 600px;
          overflow: hidden;
        }
        img {
          position: relative
        }
    </style>

    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>

    <script type="text/javascript">
        var imageOffset_x = 0;
        var imageOffset_y = 0;

        function onZoom()
        {
            var mouseInFrame_x = event.x;
            var mouseinFrame_y = event.y;
            var mouseInImage_x = imageOffset_x + mouseInFrame_x;
            var mouseInImage_y = imageOffset_y + mouseinFrame_y;
            imageOffset_x += mouseInImage_x * 0.16;
            imageOffset_y += mouseInImage_y * 0.16;

            var image = $('#container img');
            var imageWidth = image.width();
            var imageHeight = image.height();

            image.css({
                height: imageHeight * 1.2,
                width: imageWidth * 1.2,
                left: -imageOffset_x,
                top: -imageOffset_y
            });
        }

        function onRightClick() {
            imageOffset_x = 0;
            imageOffset_y = 0;

            $('#container img').css({
                height: 600,
                width: 400,
                left: 0,
                top: 0
            });

            return false;
        }

   </script>
</head>
<body>
    <a id="zoom" href="#" onclick="onZoom();">Zoom</a>

    <div id="container">
        <img src="~/Images/Sampple.jpg" width="400" height="600" onclick="onZoom();" oncontextmenu="onRightClick(); return false;"/>
    </div>
</body>
</html>

- user788454

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

正如我在上面的评论中所说，我会避免使用缩放CSS属性，而只使用JavaScript。我设法编写了以下代码，第一次单击效果非常好，它确实只需要更多的动态（甚至是一个词？）。

        <html>
              <head>
                <script type="text/javascript">
               function resizeImg (img)
               {
              var resize = 150; // resize amount in percentage
              var origH  = 200;  // original image height
              var origW  = 200; // original image width
              var mouseX = event.x;
              var mouseY = event.y;
              var newH   = origH * (resize / 100) + "px";
              var newW   = origW * (resize / 100) + "px";
             
                 // Set the new width and height
              img.style.height = newH;
              img.style.width  = newW;
              
              var c = img.parentNode;
              
              // Work out the new center
              c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
              c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
               }
             </script>
             <style type="text/css">
               #Container {
                 position:relative;
                 width:200px;
                    height:200px;
                 overflow:hidden;
               }
             </style>
              </head>
              <body>
                <div id="Container">
                  <img alt="Click to zoom" onclick="resizeImg(this)" 
                    src="https://picsum.photos/200" />
                </div>
              </body>
            </html>

它可以在Google Chrome和IE上工作，其他浏览器不确定。就像我之前所说的，希望它能指引你朝正确的方向。