CSSで画像をトリミングするコードを紹介します。
画像を囲む枠を作成し、トリミングしたい高さをheightプロパティで指定します。
overflow:hidden;プロパティを記述することで、枠からはみ出した部分を非表示にできます。
以下のHTML,CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="TrimBottom.css" />
</head>
<body>
<h1>画像下部のトリミングのデモ</h1>
<h2>元画像</h2>
<img src="char.png" />
<hr />
<h2>トリム画像</h2>
<div class="ImageFrame">
<img src="char.png" />
</div>
<div>画像の説明です。</div>
</body>
</html>
img {
width:8rem;
}
.ImageFrame {
height:8rem;
overflow:hidden;
}
トリムした画像は以下のコードで表示します。
<div class="ImageFrame">
<img src="char.png" />
</div>
ImageFrame クラスは以下のコードです。heightでトリミングして表示する部分の高さを指定します。
overflow:hiddenを指定することで、枠の大きさからはみ出した部分は非表示になり、
画像の下部は画面に表示されない動作となります。
.ImageFrame {
height:8rem;
overflow:hidden;
}
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。
画像がトリミングされて画像の上部のみが表示できています。
