CSS

【CSS】大きな画像をフレーム枠でスクロールできるようにする

大きな画像(4000px×3000pxぐらいとか)を縮小せずに表示すると、PCの画面いっぱいに画像が表示される。

画像を縮小表示しても問題なければ、最大幅を決めて縮小表示すれば良いが、縮小表示したくない時もある。

そういう場合に、最大幅を超えた部分は画像をスクロールして表示するための方法。

全く大したことはやってないけど、ググり方が良くなかったのか、CSSをあまり知らなかったのか、「フレーム」という単語を使うと、iframeばっかり出てきて、中々正解にたどり着けなかったのでまとめておく。

CSSでoverflowにscrollを設定することで、最大幅を超えた場合はスクロールできるようになる。

なお、画像の表示はキャンバスでもimgタグでも何でもOK。

画像表示(html)

html
<div class="imgDiv">
  <img src="sample.src">
</div>

imgタグは特に何も設定しない。

imgDivにはスクロール用の設定を行う。

スクロール設定(CSS)

.imgDiv {
    max-width: 800px;
    max-height: 800px;
    overflow: scroll;
}

最大幅と最大高さを800pxに設定。

画像のサイズがそれ以上の場合、overflowにscrollを設定することで、スクロールすることができる。