現在の「テキストロゴ」に反応的なグラフィックロゴを追加するにはどうすればよいですか？

Question

現在のテキストロゴに画像を追加しようとしています。現在のところ、ロゴは100％のテキストであり、応答性があり、サイズ変更されます。私はそれの前に置かれたロゴやアイコンが必要ですが、それは本当に変わったサイズ変更とライニングを続けます。ここでは、テキストのみで動作する現在のコードを示します。テキストの小さい32 x 32アイコンの赤ちゃんを追加しようとし、モバイルで適切にサイズを変更してください。ここで

@media(min-width:768px) { 
    .navbar-fixed-top { 
     padding: 25px 0; 
     -webkit-transition: padding .3s; 
     -moz-transition: padding .3s; 
     transition: padding .3s; 
    } 

    .navbar-fixed-top .navbar-brand { 
     font-size: 2em; 
     -webkit-transition: all .3s; 
     -moz-transition: all .3s; 
     transition: all .3s; 
    } 

    .navbar-fixed-top.navbar-shrink { 
     padding: 10px 0; 
    } 

    .navbar-fixed-top.navbar-shrink .navbar-brand { 
     font-size: 1.5em; 
    } 


} 

は、私は、HTMLファイル内に持っているものです：あなたは

<a class="navbar-brand" href="#page-top">LOGO TEXT WORKING</a> 

Answer 1

何を試してみましたか？さまざまなオプションがあります。画像内にロゴとテキストを含む画像を作成し、そのサイズを変更することができます。または、ロゴのみの高さをvwで設定することもできます。幅：2vwのように。別のオプションは、ロゴイメージ用のコンテナを作成し、ロゴイメージが幅：100％のときにコンテナのサイズを動的に変更することです。

または、imgとテキストの両方をコンテナに入れて、常に「ラインアップ」にします。