JavaScriptを使用して1つの大きな画像の異なる「作物」を切り替える

Question

何十ものJavascriptズームコンポーネントで何十件も読んできましたが、私が探しているものは何もありません。そのようなコンポーネント（存在する場合）またはそれを自分でコードする方法を見つける。

目的は、1つの大きな（1000x1000）イメージをブラウザにダウンロードすることです。次に、ブラウザ内では、画像は、同じ要素コンテナ内に3つのプレゼンテーション状態を持ち、ユーザはいくつかのページ要素をクリックすることによって切り替えることができます。

状態1（デフォルト）：画像全体を表示しますが、縮小率は500x500のコンテナに収まるように縮小されています（縮小されていますが、切り取られていません）。中央50％を見る、同じ容器内に、中心（すなわち、実際のサイズ、およびトリミング）：

状態2：（たとえば、他の状態との比較のために正確な縮尺ではありません）。例えば：

状態3：同一の容器（すなわち拡大、及びかなりのトリミング）で、中心、中央の25％を参照してください。たとえば、次のように

そして私は、ボタンなどの一部のページ要素のクリック、これらの三つの状態が切り替わりスクリプトを置きます。

これを行うコンポーネントへのリンクや、それを実現する方法の提案はありますか？

ありがとうございました！

Answer 1

ここでいくつかのCSSを活用して説明します。最初のケースでは

：

1）500×500であるDIVを作成し、ファイルに背景画像を設定します。 divにもbackground-size:containプロパティを設定してください。私は `バックグラウンドサイズ設定されますbackground-size:contain

3）第三のケース除去する第二ケースについて

2）：200％を;」

JSFiddle

Answer 2

何を説明してきたことは、本当にあなたはそれが簡単にいくつかのCSSとJavaScriptの数行で達成することができるやりたいすべての場合：

var container = document.querySelector('.image-zoom'), 
 
    zoomBtn = document.getElementById('zoom-it'), 
 
    i = 0; 
 

 
function clickHandler() { 
 
    if (i === 0) { 
 
     container.classList.add('zoom-2x'); 
 
     i++; 
 
    } else if (i === 1) { 
 
     container.classList.add('zoom-4x'); 
 
     i++; 
 
    } else { 
 
     container.classList.remove('zoom-2x'); 
 
     container.classList.remove('zoom-4x'); 
 
     i = 0; 
 
    } 
 

 
} 
 

 
zoomBtn.addEventListener('click', clickHandler);

.image-container, .image-zoom { 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 

 
.image-container { 
 
    overflow: hidden; 
 
} 
 

 
.image-zoom.zoom-2x { 
 
    transform: scale(2); 
 
} 
 

 
.image-zoom.zoom-4x { 
 
    transform: scale(4); 
 
}

<div class="image-container"> 
 
    <div class="image-zoom" style="background-image:url(http://lorempixel.com/250/250)"> 
 
    </div> 
 
</div> 
 

 
<button id="zoom-it">zoom image</button>

これは、あなたがCMSを使用している場合には、.image-zoomと.image-container elemで簡単に取得してインラインで挿入できるイメージのサイズを知っていることを前提としていますents。

jsFiddle

EDITあなたの質問を尋ねたものに近くなるようにjsfiddleを修正

jsFiddle 2

（画像の初期状態は、正方形内に含まれ、任意の量をトリミングされていません。）