私はイメージを持っているWebアプリケーションで作業しています。より良い言葉がないため、そのイメージの「ビュー」は、画像のどの部分を見ることができるかを制限するボックスですボックス。ビューは、エッジをドラッグして調整することができ、画像はそのままです。しかし、私はまた、ビューとイメージの両方を一緒にドラッグできるようにしたい。HTMLで静止画像の調整可能な「ビュー」を取得することは可能ですか？
私が考えることができる最もよく似たものは、画面の一部をキャプチャするために使用するWindowsのSnipping Toolです。
divを背景画像で試しましたが、divに合わせて画像のサイズが変更されます。今私は、imgを含むdivを持っているしようとしているオーバーフローを持っているdivを設定：非表示、しかし、それはdivの左上隅に画像スティックになります。
ヘルプ？前もって感謝します！
あなたは画像をマスクし、セグメントのみを表示するようなものが欲しいですね。
のような構造を仮定します。
<div class="img-mask">
<img>
</div>
あなたは、オーバーフロー幅と高さ（これは、マスクを作成します）で非表示にするマスクのスタイルを設定することができます。次に、イメージを相対的に、左と上の位置に配置します。
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
これは、イメージをマスクの中央に配置する必要があります。
http://jsfiddle.net/YrV5L/ - +1、私はそれが好きです。 – mrtsherman
私は、左からマスクのサイズを変更すると、まだ下の画像を周りにシフトすると思いますよね？私は2つの要素が何らかの形でDOMの並列レベルにある必要があると思いますが、私はそこで失われています... – visiblenoise
パーセントで左と上の位置を適用すると、そうです。ただし、pxを使用して設定されている場合は、左上隅に相対的です。したがって、マスクの幅/高さを増減すると、マスクの右下隅が変更されるため、画像は移動しません。 –
私はCSSのプロパティが正確にこのタスクのために切り捨てられたと思います：クリップ属性。
ここにW3schoolsのチュートリアルがあります：http://www.w3schools.com/cssref/pr_pos_clip.aspです。 自分自身をお試しくださいボタンをクリックすると、実践的なアイデアが得られます。
このCSSプロパティはイメージにのみ適用され、追加のマスクdivは必要ありません。
JCropを見ましたか？ http://deepliquid.com/content/Jcrop.html – madcapnmckay
今私は持っています。最初は有望だと思われましたが、この場合に使用するにはあまりにも具体的だと思います。画像とビューは、設定された高さで、サイドが調整可能である必要があります。 – visiblenoise