web-dev-qa-db-ja.com

画像を拡大して中央に配置するにはどうすればよいですか？

javascript、cssを使用して特定のポイントで画像を拡大する方法はありますか？ webkitベースのブラウザを使用しています。

ʻelem.style.zoom = "150％"のようにズームプロパティを指定してズームできます。主な問題は、ズームしたい場所に画像を中央揃えできないことです。 mouseclickを使用して、ズームしたいポイントを取得できます。

javascriptcsszoom
10
sat

上記のコメントで述べたように、私はズーム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>

それはグーグルChromeとIEで動作します、他の人についてはわかりません。私が言ったように、それはあなたを正しい方向に向けることを願っています。

17
Andy E

何をしなければならないか。

  1. 画像内のクリックの場所を取得します。これは簡単に思えるかもしれませんが、イベントのpageXとpageYがドキュメントに関する座標を保持しているためではありません。画像内で誰かがクリックした場所を計算するには、ドキュメント内の画像の位置を知る必要があります。しかし、これを行うには、そのすべての親を考慮に入れる必要があります。また、それらが相対的/絶対的/静的に配置されているかどうかも考慮に入れる必要があります。
  2. 新しい中心を計算します（拡大縮小されたクリック位置-コンテナの左上の位置）
  3. 画像を拡大縮小し、コンテナを新しい中心までスクロールします

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>
3
Gabriele Petrioli

次のコードでは、画像はマウスのクリックポイントで増幅されます。画像は増幅されますが、クリックしたポイントはマウスカーソルの下に残り、フレームのサイズは同じままです。右クリックすると、元の表示比率に戻ります。

<!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>
1
Silly Dude