CSS | 画像をはみ出さないようにする方法

2021-02-052023-06-07CSS 画像,CSS

CSSで画像が親要素の枠内からはみ出てしう場合に、画像をはみ出さないようにするサンプルです。

画像がはみ出るケースはいくつかあります。

• border-radiusで角を丸めている
• positionで位置を固定している
• 画像のサイズ・指定したサイズが親要素より大きい
• 拡大アニメーションを利用

などなど、画像がはみ出る理由は様々ですが基本的には親要素からはみ出た部分を非表示にすることで対応できる場合が多いと思います。

See the Pen CSS | Prevent the image from sticking out by yochans (@yochans) on CodePen.

画像がはみ出さないようにする

親要素から画像がはみ出さないようにするには、親要素にoverflowプロパティにて「hidden」を指定します。

<div id="container">
		<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" width="300px" />
</div>

#container {
	width: 150px;
	height: 150px;
	margin: 10px;
	border-radius: 20px;
	overflow: hidden;
}

「overflow: hidden;」は画像だけでなく全ての子要素に対して有効です。