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

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

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

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

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

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

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

画像表示（html）

1html
2<div class="imgDiv">
3  <img src="sample.src">
4</div>

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

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

スクロール設定（CSS）

1.imgDiv {
2    max-width: 800px;
3    max-height: 800px;
4    overflow: scroll;
5}

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

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

MAX

ITエンジニア、データサイエンティスト

TwitterContact

新卒でSIerに入社し、フリーランスになってWEB系へ転向。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。