Webデザイナーブログから学ぶホームページ制作

ホームページ上の画像や写真を特定の形状に整えることは重要な要素の一つです。特に、正方形や円形に縦横比を維持してトリミングすることで、美しいデザインを実現することができます。
画像や写真を正方形や円形に縦横比を維持してトリミングしたい場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「object-fit」プロパティを使うことで画像や写真を正方形や円形に縦横比を維持してトリミングすることができます。

今回は、CSSで画像や写真を正方形や円形に縦横比を維持してトリミングする方法を解説します。

CSSで画像や写真を正方形に縦横比を維持してトリミングする場合は、「object-fit」プロパティを追記する必要があります。CSSでコンテンツ要素に「filter」プロパティを加え「置換要素」を適用します。
「filter」プロパティに記述する要素は、「contain」「cover」「fill」「none」「scale-down」などがあります。

CSSで画像や写真を切り抜かずにリサイズして配置する場合は、「object-fit」プロパティに「contain」の値を指定することで実装ができます。

※高さを「auto」に変更すれば上下の余白は無くなります。

<div class="box2"><img src="/img/test.jpg"></div>

.box2 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box2 img{
  width: 200px;
  height: 200px;
  object-fit: contain;
}

CSSで画像や写真を正方形にリサイズして配置する場合は、「object-fit」プロパティに「cover」の値を指定することで実装ができます。

<div class="box3"><img src="/img/test.jpg"></div>

.box3 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box3 img{
  width: 200px;
  height: 200px;
  object-fit: cover;
}

CSSで画像や写真をコンテンツ要素全体に配置する場合は、「object-fit」プロパティに「fill」の値を指定することで実装ができます。

<div class="box4"><img src="/img/test.jpg"></div>

.box4 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box4 img{
  width: 200px;
  height: 200px;
  object-fit: fill;
}

CSSで画像や写真をリサイズせず切り抜いて配置する場合は、「object-fit」プロパティに「none」の値を指定することで実装ができます。

<div class="box5"><img src="/img/test.jpg"></div>

.box5 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box5 img{
  width: 200px;
  height: 200px;
  object-fit: none;
}

CSSで画像や写真を「none」または「contain」の小さい方を優先に配置する場合は、「scale-down」プロパティに「scale-down」の値を指定することで実装ができます。

<div class="box6"><img src="/img/test.jpg"></div>

.box6 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box6 img{
  width: 200px;
  height: 200px;
  object-fit: scale-down;
}

CSSで画像や写真を円形に縦横比を維持してトリミングする場合は、「object-fit」プロパティを追記する必要があります。CSSでコンテンツ要素に「filter」プロパティを加え「置換要素」を適用します。
「filter」プロパティに記述する要素は、「contain」「cover」「fill」「none」「scale-down」などがあります。

CSSで画像や写真を切り抜かずにリサイズして配置する場合は、「object-fit」プロパティに「contain」の値を指定することで実装ができます。

※高さを「auto」に変更すれば上下の余白は無くなります。

<div class="box8"><img src="/img/test.jpg"></div>

.box8 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box8 img{
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius:50%;
}

CSSで画像や写真を正方形にリサイズして配置する場合は、「object-fit」プロパティに「cover」の値を指定することで実装ができます。

<div class="box9"><img src="/img/test.jpg"></div>

.box9 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box9 img{
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius:50%;
}

CSSで画像や写真をコンテンツ要素全体に配置する場合は、「object-fit」プロパティに「fill」の値を指定することで実装ができます。

<div class="box10"><img src="/img/test.jpg"></div>

.box10 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box10 img{
  width: 200px;
  height: 200px;
  object-fit: fill;
  border-radius:50%;
}

CSSで画像や写真をリサイズせず切り抜いて配置する場合は、「object-fit」プロパティに「none」の値を指定することで実装ができます。

<div class="box11"><img src="/img/test.jpg"></div>

.box11 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box11 img{
  width: 200px;
  height: 200px;
  object-fit: none;
  border-radius:50%;
}

CSSで画像や写真を「none」または「contain」の小さい方を優先に配置する場合は、「scale-down」プロパティに「scale-down」の値を指定することで実装ができます。

<div class="box12"><img src="/img/test.jpg"></div>

.box12 {
  display: flex;
  justify-content: center; /* 水平方向にセンターに配置 */
  align-items: center;
  margin:0 auto 5%;
}
.box12 img{
  width: 200px;
  height: 200px;
  object-fit: scale-down;
  border-radius:50%;
}

CSSを使って画像や写真を正方形や円形に縦横比を維持してトリミングする方法をご紹介させて頂きました。
正方形にトリミングする際には「object-fit: cover;」を使用し、円形にトリミングする際には「border-radius: 50%;」を使用します。
これらのテクニックを活用して、魅力的な画像をウェブページに適切に配置してください。