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