<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>
目次
プログラミング学習を体系的に進めたい人へ
独学で基礎を確認したあとに、質問できる環境や転職・副業向けの学習サポートも比べたい人は、プログラミングスクールの比較記事も参考にしてください。学習目的、料金、受講期間、サポート範囲を分けて見ると、自分に合う学び方を選びやすくなります。
