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

作成中のサイトで縦横比の異なる画像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>