HTML5 divタグの扱い（分割について）

Question

htmlで画像を分割表示したいと思っております。

上記の画像（オレンジは元画像として）divタグを用いて分割し、4分割した画像をそれぞれ扱えるようにしたいと思っております。

具体的には4分割した画像を自由に動かせるようにしたいです。（画像1枚では実装済みです。)
cssでbackground-imageとして実装はしてみたのですが,動画も同じように扱いたいと思っているので別な方法をと考えております。

画像をdivタグで囲い、その中にdivを４つ用意したのですが、画像1枚div４つ,といった5つのブロックに分かれてしまします。

可能であればアドバイス頂きたいです。
よろしくお願いいたします。

Answer 1

4つのディブにそれぞれ表示したい画像を位置をかえて配置。

オーバーフローでヒダン。

幅、高さを固定で指定して、元画像の大きさと、4つのディブの合計の大きさを合わせなければいけませんし、可変に対応不可、デバイス毎に固定で切り替えは可能。

動画も同じ原理で如何でしょうか？

Comments

[yuzusenbei]

ありがとうございます。
仰っていただいたやりかたで非表示をうまく使い, なんとか出来そうです。
画像（動画）のソース一つで分割することは可能ですか...？
分割したいdivの数だけソースを用意をしなければならない方法しか思いつきません...

[KatsukiSugiura]

動画も埋め込みですから4つ取得して、高さ、幅を固定で画像と同じ理屈でしかできないのではと思います。

iframeやobject、embedなどで埋め込みするとhtmlなどが出力されて一般的に再生出来る状態になっていますから、後後内部仕様が変更される可能性もありますし…。

[yuzusenbei]

扱うファイルサイズの関係でソースの数を極力減らしたかったのですが難しそうですね...
画像(動画)の一部を別枠に表示することができれば近いことができると考えたのですが, その方法もわかりません...
ご回答ありがとうございます。