ヘッダーのコンテンツをフレックスで横並び。よくあるパターンですよね。
今回、そのよくあるパターンだと思ってたヘッダーでかなりハマってしまったので、備忘録として。
ヘッダーロゴ画像のサイズに合わせてヘッダーの高さを可変したい
実現したかったのは、こんなヘッダー。
pc表示 1080px
青い四角は画像で、ピンクの四角は文字です。
２つの画像をフレックスで横に並べています。
htmlはこんな感じ。
<header class="header"> <div class="header-inner"> <h1 class="header-title"> <img src="39.jpg"alt=""> </h1> <div class="header-logo"> <p class="head-img2">img2</p> </div> </div><!-- /inner --> </header><!-- /header -->
cssは長くなるのでポイントのみ。
子要素にもflexを設定してます。
.header-inner {
display: flex;
}
.header-title {
display: flex;
width: 87%;
}
.header-logo {
width: 13%;
/**縦中央寄せのため*/
display: flex;
align-items: center;
}imgにはあらかじめレスポンシブのためのmax-width: 100%; height: auto;を設定済みの体です。
で。これをスマホサイズにすると・・・
スマホ 768px
横幅が狭くなった分中のコンテンツも縦横比率を守ったまま縮小しています。
そして、画像の縦幅が狭くなった分ヘッダーの高さそのものも低くなっています。
ヘッダー下のボーダーがちゃんと画像の縮小に合わせてついてきてくれてますね。
これが理想の挙動です。
chromeでは理想の挙動
この実装をchromeで見てみると、ふむふむ。
ちゃんとなってますね！
青い画像の縦横比率が守られています。
safari・・・
しかしsafariで見てみると・・・
青い画像の文字が縦に引っ張られています。
画像の縦横比率がくずれて横だけせまく可変しているので、ヘッダーの高さはかわらないまま。
これはよろしくありません。
今回は画像なので⬆︎のように文字が伸びてわかりやすいのですが、実際の案件ではsvgを使用していたため文字がひっぱられることなく収縮し、下に余白だけどんどんできるという謎な状況になってしまったのです。
これですごく時間が取られました・・・
解決策
align-items: flex-start;
を追記するだけ！です。
高さを可変してほしい部分につけるので、この場合だと青い画像を収めているdivタグに
.header-title {
display: flex;
align-items: flex-start;
width: 87%;
}こんな感じで書きます。
すると・・・
safariでも縦横比率を守って縮小くれました！！
ブラウザごとに挙動が違うというのは、なかなか大変だ。
flexboxで並べた画像がはみ出たり伸びたりしてしまうときの対処法
こちらのサイト様のおかげで解決しました！ありがとうございます！！
