ナビゲーションバーにイメージを整列させる方法と、小さなデバイスの場合、イメージをコンテンツに合わせて左に移動しますか？

Question

私はそれに透明なロゴイメージを持っています。固定されたナビゲーションバーの中央にロゴイメージを配置し、右側のコンテンツがnavbarに収まるように、小さなデバイスの左側に少し動かすにはどうすればよいですか？

私はbackground-size: coverを試しましたが、画像が反応してロゴが途切れてしまいました。私はbackground-size: containを試しましたが、大きなデバイスではnavbarの背景色が失われます。

私は必要なものを得るためにイメージをHTMLに移動する方法はありますか？ここで

は私のplnkrの試みです： https://plnkr.co/edit/Uij12vHwFuaeAS91nYUL?p=preview

おかげ

UPDATE：

私は別のアプローチをしようとしてHTMLに画像を移動し、CSSのフレキシボックスを使用しようとしていますアプローチ。ほぼそこにあるが、ギャップをなくす必要がある。

HTML：

<nav class="navbar navbar-fixed-top"> 
     <div class="search"> 
     <i class="fa fa-search"></i> 
     </div> 
     <a class="brand-logo" href="#/"> 
     <img src="https://i.imgsafe.org/1963cc1736.png" /> 
     </a> 
     <aside> 
     <figure class="account-balance"> 
     <span>de 88,980.7740</span> 
     <i class="fa fa-user"></i> 
     </figure> 
     </aside> 
    </nav> 

CSSここで

nav.navbar { 
border: 0; 
color: #FFF; 
height: 40px; 
min-height: 40px; 
z-index: 1; 
display: 0; 
-webkit-box-pack: justify; 
-moz-box-pack: justify; 
-webkit-justify-content: space-between; 
-ms-flex-pack: justify; 
justify-content: space-between; 
} 

.search,.filler,aside,figure { 
    height: 100%; 
} 

.search,.filler,aside { 
    background: #266224; 
    float: left; 
} 

.search,aside { 
    flex-grow: 1; 
    -webkit-flex: 1; 
} 

.search .fa-search,figure > span { 
    display: inline-block; 
    margin-top: 12px; 
} 

.search { 
    padding: 0 12px; 
} 

.brand-logo img { 
    height: 40px; 
    max-width: 100%; 
} 

figure { 
    float: right; 
} 

figure.account-balance { 
    padding-right: 12px; 
} 

figure > span { 
    line-height: 25px; 
    margin-top: 8px; 
    padding-right: 5px; 
} 

フレキシボックスを使用して修正したバージョンです： https://embed.plnkr.co/wSWpIDIoJOiSQYVvwHMU/

しかしこれは問題の解決に近づくん、これはうまく機能していませんiPhone 6と古いiPadで。

アンカータグの両側にわずかな隙間があります（ピクセル間隔が半分になる場合もあります）。ここで述べた解決方法を試しましたが、それはうまくいきません。

ギャップを取り除く方法をご存知ですか？

Answer 1

デバイスの幅が異なるために指定されたスタイルを書き込もうとします。using this

Answer 2

この試してください：あなたがしなければならない唯一のことは、色であなたのロゴにOを埋めるあるこの

.brand-logo { 
    background: url(https://i.imgsafe.org/1963cc1736.png) left center no-repeat; 
    background-size: contain; 
    background-position: center; 
    background-color: #266224; 
    height: 100%; 
} 

を使用

@media screen and (min-width: 678px) { 
     ul li { 
      height: 180px; 
      width: 180px; 
      background: #f6304c; 
      display: block; 
      color: #ffffff; 
      text-align: center; 
      float:left; 
     /margin: 2% 0 0 30%;*/ 
      padding: 50px 0; 
     } 

    } 

Answer 3

モバイルデバイス用の

ul li { 
    height: 180px; 
    width: 180px; 
    background: #f6304c; 
    display: block; 
    color: #ffffff; 
    text-align: center; 
    margin: 2% 0 0 30%; 
    padding: 50px 0; 
} 

をそれは透明なのでXD