画像にCSSで横方向いっぱいに padding を設定する方法
CSS を使用して画像に水平方向いっぱいに padding を設定する方法について解説します。
画像の幅を100%に設定
最も簡単な方法は、画像の幅を100%に設定することです。 style.css に .image クラスに対して下記のコードを記述します。
.image {
width: 100%;
}
width: 100%; を指定することで、画像の横幅が親要素の幅いっぱいに広がります。 <img> タグは元々画面幅に対して100%の大きさになるようになっているので、.image に対しても width: 100%; を指定することで画像が画面幅いっぱいに表示されます。
padding を使用して余白を設定
padding を使用することで、画像の周囲に余白を設定することができます。
.image {
padding: 20px;
/* 上下に20px、左右にも20pxの余白を設定 */
}
padding の指定方法
padding は、上下左右の4方向に対して個別に値を設定することができます。
| 指定方法 | 説明 |
|---|---|
padding: 20px; |
上下に20px、左右にも20pxの余白を設定 |
padding: 10px 20px; |
上下に10px、左右に20pxの余白を設定 |
padding: 5px 10px 15px 20px; |
上に5px、右に10px、下に15px、左に20pxの余白を設定 |
HTML の記述例
下記は、上記で紹介した CSS を使用した HTML の記述例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>画像に padding を設定する</title>
</head>
<body>
<img src="sample.jpg" alt="サンプル画像" class="image">
</body>
</html>
参考資料
よくある質問
Q1: 画像の縦横比を維持したまま、横幅いっぱいに表示するにはどうすれば良いですか？
A1: object-fit: cover; プロパティを使用します。
.image {
width: 100%;
height: auto; /* 高さを自動調整 */
object-fit: cover;
}
Q2: padding をパーセントで指定することはできますか？
A2: はい、可能です。ただし、パーセント値は親要素の幅を基準に計算されます。
.image {
padding: 10%; /* 親要素の幅に対して10%の余白を設定 */
}
Q3: padding と margin の違いは何ですか？
A3: padding は要素の 内側 に余白を作成し、margin は要素の 外側 に余白を作成します。
その他の参考記事:css li 横並び 均等