Backgroundプロパティを利用して画像をトリミングして表示するコードを紹介します。
概要
以下の記事では object-fit プロパティ、clip-path プロパティを使用して画像をクリップする方法を紹介しました。
紹介した方法以外に、画像をクリップする方法にはBackgroundプロパティを利用する方法もあります。
この記事では、Backgroundプロパティを利用して画像をクリップ表示するコードを紹介します。
コード
以下のコードを記述します。
.my-image-01 {
width: 600px;
}
.my-image-01-back-01 {
width: 600px;
height:320px;
background:url('image.png');
}
.my-image-01-back-02 {
width: 600px;
height: 320px;
background: url('image.png');
background-position: -160px -20px;
}
.my-image-01-back-03{
width: 600px;
height: 320px;
background: url('image.png');
background-size: cover;
}
.my-image-01-back-04 {
width: 600px;
height: 320px;
background: url('image.png');
background-size: 120px;
}
.my-image-01-back-05 {
width: 300px;
height: 160px;
background: url('image.png');
background-position: -140px -56px;
background-size: 580px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="simple-image-background-01.css" />
</head>
<body>
<h1>Image Backgroundのデモ</h1>
<p>オリジナルの画像(widthのみ指定)</p>
<image class="my-image-01" src="image.png" />
<br />
<p>トリミング1</p>
<div class="my-image-01-back-01"></div>
<br />
<p>トリミング2</p>
<div class="my-image-01-back-02"></div>
<br />
<p>トリミング3</p>
<div class="my-image-01-back-03"></div>
<br />
<p>タイリング</p>
<div class="my-image-01-back-04"></div>
<br />
<p>トリミング4</p>
<div class="my-image-01-back-05"></div>
<br />
</body>
</html>
解説
1つめの画像は枠の幅と高さを指定し、backgroundプロパティで画像を配置します。
拡大、縮小はされず、画像の左上から元のサイズのまま表示される動作になります。
.my-image-01-back-01 {
width: 600px;
height:320px;
background:url('image.png');
}
2つめの画像は、1つめの画像と同じ設定で、枠の幅と高さを指定し背景画像を設定しています。
background-positionプロパティが指定されており、画像の基準点の位置を左に160ピクセル、上に20ピクセル移動しています。
画像は左上方向にずれて表示されます。
.my-image-01-back-02 {
width: 600px;
height: 320px;
background: url('image.png');
background-position: -160px -20px;
}
3つ目の画像は
background-size: coverを指定しています。枠に画像の全体が表示されるよう縦横比を維持した状態で
拡大、縮小されて表示されます。今回の例では、元画像が横長のため、画像の高さがすべて表示されるよう画像が縮小されて表示されます。
.my-image-01-back-03{
width: 600px;
height: 320px;
background: url('image.png');
background-size: cover;
}
4つ目の画像は、background-sizeプロパティにサイズを設定しています。縦横比を維持したまま、指定したサイズに縮小し、タイリングして表示します。
.my-image-01-back-04 {
width: 600px;
height: 320px;
background: url('image.png');
background-size: 120px;
}
5つ目の画像は、background-sizeプロパティにサイズを設定しているため、縦横比を維持したまま、指定したサイズに縮小しています。
また、background-positionプロパティで表示位置をずらして背景画像を表示します。
.my-image-01-back-05 {
width: 300px;
height: 160px;
background: url('image.png');
background-position: -140px -56px;
background-size: 580px;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
画像がトリミング、クリップされて表示されています。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-05-22
作成日: 2022-10-23
