2列を保持するBootstrap 3の行があります。
「デスクトップ」では、ロゴは 3 列の小さな幅で、ナビゲーションは残りの 8 列の幅です。
+----------------+-------------------------------- --+
| 私のロゴ | マイナビゲーション |
| | | | | |
+----------------+-------------------------------- --+
私のロゴは背景画像であり、使用可能なスペース (div の幅と高さ) に合わせてスケーリングするための CSS がいくつかあります。
私の問題
小さいビューポートでは、ロゴとナビゲーションの両方を 100% または 12 列にします。IE は、ロゴを上に、ナビゲーション バーを下にして垂直にスタックします。
+ --------------------------+
| 私のロゴ |
+ --------------------------+
| マイナビゲーション |
+ --------------------------+
ただし、そのレイアウトが開始されると、私のロゴは大きくなり、切り取られます。ロゴの DIV を最大高さ 150px に設定していますが、ロゴの背景が使用可能な全幅にスケーリングされ、レターボックスでトリミングされています。利用可能な最大の高さ（150px）を取り、それに基づいて比例して幅を定義したいと思います。
助言がありますか？お時間をいただきありがとうございます。
logo-wrapper {
background-image: url(../../../images/logo.png);
background-repeat: no-repeat;
height: 150px;
background-size: 100%;
background-position: center bottom;
}