画像を美しく魅せる！HTML、CSS、background-image でできるリサイズとトリミングのテクニック
2024-04-02
HTML、CSS、background-image を用いた画像のリサイズとトリミング
HTML
まず、HTML コードで <img> 要素を使用して画像を表示します。
<img src="image.jpg" alt="Image description">
CSS
次に、CSS コードを使用して画像をリサイズとトリミングします。
background-image プロパティを使用して、画像を要素の背景として設定できます。
.image-container {
background-image: url("image.jpg");
}
.image-container {
background-size: cover;
}
cover 値は、画像を要素のサイズに合わせて拡大・縮小し、はみ出ないようにトリミングします。
.image-container {
background-position: center center;
}
center center 値は、画像を要素の中央に配置します。
object-fit プロパティを使用して、画像の表示方法を指定できます。
.image-container {
object-fit: cover;
}
.image-container {
object-position: center center;
}
例
<div class="image-container">
<img src="image.jpg" alt="Image description">
</div>
.image-container {
background-image: url("image.jpg");
background-size: cover;
background-position: center center;
width: 200px;
height: 200px;
}
このコードは、画像を 200px x 200px のサイズにリサイズし、要素の中央に配置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Resized and Cropped</title>
</head>
<body>
<div class="image-container">
<img src="image.jpg" alt="Image description">
</div>
</body>
</html>
.image-container {
background-image: url("image.jpg");
background-size: cover;
background-position: center center;
width: 200px;
height: 200px;
}
説明
- このコードは、
image.jpgという画像を表示します。 background-position: center center;は、画像を要素の中央に配置します。width: 200px;とheight: 200px;は、要素のサイズを 200px x 200px に設定します。
実行
このコードを HTML ファイルと CSS ファイルに保存し、ブラウザで開きます。画像が 200px x 200px のサイズにリサイズされ、要素の中央に配置されていることを確認できます。
応用
このコードを応用することで、さまざまな方法で画像をリサイズとトリミングすることができます。
- 画像をさまざまなサイズにリサイズできます。
HTML、CSS、background-image を用いた画像のリサイズとトリミングの他の方法
.image-container {
background-image: url("image.jpg");
background-size: 100px 100px;
background-repeat: repeat;
}
.image-container {
background-image: url("image.jpg");
background-size: cover;
background-clip: border-box;
}
このコードは、画像を要素の境界線内に収まるようにトリミングします。
.image-container {
border-image: url("image.jpg") 10 10 10 10;
border-width: 10px;
}
このコードは、画像を 10px 幅のボーダーとして表示します。
@media ルールを使用して、デバイスの画面サイズに応じて画像のサイズを変更することができます。
@media (max-width: 768px) {
.image-container {
background-size: contain;
}
}
このコードは、画面サイズが 768px 以下の場合は、画像を要素内に収まるように表示します。
html css background-image
