CSSスキル - 第6章 Lesson8

overflowを使って、画像のサイズを変更してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

指定したボックスの範囲内からはみ出た部分を非表示にすることができるoverflowプロパティを使って、
画像に直接編集を加えない形で、画像のサイズを変更する方法を初心者向けに解説しています。



この動画で学べること

・overflowプロパティで画像の切り抜きをする方法



overflowプロパティで画像の切り抜きをする方法

画像の切り抜きをoverflowプロパティを使ってやってみましょう。
前回も学んだように、overflowでは4つの値を設定することができました。

・hidden(はみ出た部分を消す)
・scroll(スクロールさせ、常にスクロールバーを出す)
・visible(デフォルト値で、はみ出た部分を出す)
・auto(必要であればスクロールバー、スクロールバーを出す)

今回は、「hidden」を使って、画像のはみ出た部分を消していきましょう。
<figure>タグに対して、overflow: hidden;をかけ、どこから隠すかをwidthとheightを使って指定します。




figure {
overflow: hidden;
width: 500px;
height: 200px;
}




保存してブラウザで見てみましょう。
横500px、高さ200pxからはみ出た部分を消すことができました。