【html/CSS】縦横比の違う画像を均等に横並びにする方法

記事内にPRが含まれる場合があります

2026年5月7日

URLをコピーしました！

作成中のサイトで縦横比の異なる画像4枚を横にいい感じで並べたいと思いました。

横に並べるので縦（高さ）は全て統一したいですよね。それで以下のようにimgタグを記述して高さを100pxで固定にしたところ。

<img style="height:100px;" src="https://tabelog.com/imgview/original?id=r5061739933397">

<img style="height:100px;" src="https://tabelog.com/imgview/original?id=r5070939933449">

<img style="height:100px;" src="https://tabelog.com/imgview/original?id=r1372161111251">

<img style="height:100px;" src="https://tabelog.com/imgview/original?id=r4872139932866">

画像はこのように表示されてしまいました。3枚目の画像だけ縦長なので高さを100pxにすると縦横比を維持したまま小さくなるので横幅が短くなって3枚めだけ小っさ！となってしまうのです。

いろいろ探し回っていたらCSSで画像の切り取り（トリミング）が簡単に出来るということで以下のCSSを記述。

.thumbnail150 {
  width:150px;
  height:150px;
  object-fit:cover;
  margin:10px 2px;
}

ポイントはobject-fit:cover;の1行です。これを入れるだけでいい感じにトリミングしてくれます。縦横のサイズは150pxで正方形にしました。

HTMLは以下のように記述です。classでthumbnail150を指定しました。

<img class="thumbnail150"src="https://tabelog.com/imgview/original?id=r5061739933397">

<img class="thumbnail150"src="https://tabelog.com/imgview/original?id=r5070939933449">

<img class="thumbnail150"src="https://tabelog.com/imgview/original?id=r1372161111251">

<img class="thumbnail150"src="https://tabelog.com/imgview/original?id=r4872139932866">

そうすると画像は以下のようにいい感じで並びました。

ところがスマホ（横幅400pxを想定）で見ると画像が横並びになる幅がないため下に来てしまいます。（レスポンシブなサイトだとこれは普通ですが）画像サイズを固定（150×150）にしてるのでちょっとアンバランスな感じです。

ここからさらに調査してスマホでアクセスしたら横2枚になるように実装できました。

HTMLとCSSを記述します。

CSS


.col-a .col {
	float: left;
	margin-left: 1px;
}

.col-a .col {
	width: 24%;
}

/*floatの解除*/
.col-a:after {
	content: '';
	display: block;
	clear: both; 
	height: 0;
}

/*画像のサムネイル*/
.col-thumb {
  width:100%;
  height:150px;
  object-fit:cover;
}

/*スマホの場合を想定*/
@media only screen and (max-width : 480px){
	.col-a .col:first-child{
		margin-left: 1px;
	}
	.col-a .col{
	  margin-bottom:1px;
		width: 48%; /*幅48%で横に2つ並べる*/
	}
}

HTML

<div class="col-a">
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r5061739933397">
  </div>
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r5070939933449">
  </div>
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r1372161111251">
  </div>
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r4872139932866">
  </div>
</div>

あと以下のように横幅いっぱいにするようにも出来ました。これでPCで見たときは横並びで表示され、スマホで見たら縦並びで違和感のない感じになりました。

CSSとHTMLを記述します。



.col-b .col {
	float: left;
	margin-left: 1px;
}

.col-b .col {
	width: 24%; /*幅24%なので横に4枚並ぶ*/
}

/*floatの解除*/
.col-b:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

/*画像のサムネイル*/
.col-thumb {
  width:100%;
  height:150px;
  object-fit:cover;
}

/*スマホの場合を想定*/
@media only screen and (max-width : 480px){
	.col-b .col{
		float: none;
		margin-left: 0;
		margin-bottom:1px;
		width: auto; /*幅は横いっぱい*/
	}
}

<div class="col-b">
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r5061739933397">
  </div>
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r5070939933449">
  </div>
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r1372161111251">
  </div>
  <div class="col">
  <img class="col-thumb"src="https://tabelog.com/imgview/original?id=r4872139932866">
  </div>
</div>

Post Views: 159