くまだどうも、くまだです。
横幅が異なる画像を横にきれいに並べる方法です。
地味にハマったのでメモ。
横幅が異なる画像を横に並べる方法
例えば以下のような4つの画像を横に並べたい。
ロゴの大きさもテキストのフォントサイズも同じですが、ロゴとテキストが1枚の画像という場合。
↑は横幅揃ってますが、実際は画像の横幅はバラバラです。
パッと思いつく感じだと下記のようにflexboxで横に並べます。
<div class="p-imgobx">
<div class="c-img">
<img src="test.png" alt="">
</div>
<div class="c-img">
<img src="test2.png" alt="">
</div>
<div class="c-img">
<img src="test3.png" alt="">
</div>
<div class="c-img">
<img src="test4.png" alt="">
</div>
</div>.p-imgobx {
display: flex;
flex-wrap: wrap;
}
.c-img {
max-width: 180px;
width: 100%;
height: 100%;
margin-top: 10px;
margin-left: 10px;
border: 1px solid #333;
}
.c-img img {
width: 100%;
height: auto;
display: block;
}
ただ横に並べるだけだったらこれでもいいんですが、ロゴの大きさをそろえたい。かといって、heightを100%にすると、
.c-img img {
width: 100%;
height: 100%;
display: block;
}
こんな感じで画像が縦に引き伸ばされてしまう。例えば画像の横幅をmax-widthで決めてしまうと、横長の画像のときに画像がつぶれてしまいます。できれば「画像の横幅依存」でそろえていきたい。
以下のように修正。画像の横幅100%を辞めて、高さを具体的に値を指定する。
.p-imgobx {
display: flex;
flex-wrap: wrap;
}
.c-img {
height: 60px; /* 高さ指定 */
margin-top: 10px;
margin-left: 10px;
border: 1px solid #333;
}
.c-img img {
width: auto; /* autoに変更 */
height: 100%;
display: inline-block;
}
こんな感じで揃えることができました。
想定される状況としては、もしこの部分がWordPressで動的に出力させたい場合、画像の横幅が長いものが出るのか、横幅が短い画像が出るか分からない状況だと、うかつにmax-widthは使えない。（最初のほうでやった、画像の高さがそろわなくなる）
画像の高さを指定・横幅は画像依存にする形であれば、画像の横幅が長くても短くても対応できます。（高さに合わせて横幅がサイズ調整されるので）
なお、flexbox以外にGridも横に並べることはできますが、横幅が可変するような場合はGridはあまり得意ではありません。（一応Gridパターン↓）
.p-imgobx {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.c-img {
width: 100%;
height: 80px;
border: 1px solid #333;
}
.c-img img {
width: 100%;
height: 100%;
display: block;
}
画像が引き伸ばされたりします..。
Gridはパネルみたいな規則性があるものを並べるのは得意ですが、「横幅が可変するもの」を並べるのはあまり向いてないです。
ここまで読んでくださりありがとうございました。