offcanvasイメージを置き換えるにはどうすればいいですか？

Question

イメージがオフキャンバスの場合は、大型スクリーンの場合は完全なロゴを、メニューのショートロゴ（製品ブランドの画像のみ）を作成します。

私の現在のSCSS：

#header { 
    background-color: $header-bg; 
    z-index: 1001; 
    @include transition(right .25s $ease-in-circ, padding-right .25s $ease-in-circ); 

    .branding { 
    background-color: $sidebar-bg; 
    width: 250px; 
    height: 45px; 
    float: left; 
    padding: 0 15px; 

    img.brand { 
     color: white; 
     padding-left: 10px; 
     padding-top: 10px; 
     height: 40px; 
     float: left; 
     @include transition(none); 

     &:hover { 
     text-decoration: none; 
     } 
    } 

    .offcanvas-toggle { 
     color: white; 
     margin-left: 5px; 
     opacity: .5; 
     padding: 1px 4px; 
     font-size: 18px; 

     &:hover { 
     opacity: 1; 
     } 
    } 
    } 

そしてHTML要素：

<header class="clearfix"> 

    <!-- Branding --> 
    <div class="branding {{main.settings.brandingColor}}"> 
     <img src="/app/images/logo.png" class="brand" ui-sref="app.dashboard" alt="MyApp"> 
    <a href="javascript:;" class="offcanvas-toggle visible-xs-inline" offcanvas-sidebar><i class="fa fa-bars"></i></a> 
    </div> 
    <!-- Branding end --> 
</header> 

私はオリジナルのロゴがままウィンドウを縮小した場合、それは、今ある道。代わりのロゴはどこに置くべきですか？別の<img>タグですか？

ありがとうございます。

Answer 1

まず、あなたのコードで気づいたことのない小さなものです。 SCSSでは、#headerと記載しました。しかしhtmlでは、id属性はありません。とにかく、下のスニペットでは、背景色の変数を削除し、コードを単純化するように移行しました。スニペットは私が推測するCSSのみをサポートしています。だから私は前処理されたCSSを追加する必要がありました。

#header .branding { 
 
    float: left; 
 
    padding: 0 15px; 
 
} 
 
#header .branding .brand { 
 
    width: 250px; 
 
    height: 45px; 
 
    color: white; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    float: left; 
 
} 
 
#header .branding .brand:hover { 
 
    text-decoration: none; 
 
} 
 
@media (max-width: 800px) { 
 
    #header .branding .brand { 
 
    display: none; 
 
    } 
 
} 
 
#header .branding .sml-brand-img { 
 
    display: none; 
 
} 
 
@media (max-width: 800px) { 
 
    #header .branding .sml-brand-img { 
 
    display: block; 
 
    width: 50px; 
 
    height: 45px; 
 
    } 
 
} 
 
#header .branding .offcanvas-toggle { 
 
    color: white; 
 
    margin-left: 5px; 
 
    opacity: .5; 
 
    padding: 1px 4px; 
 
    font-size: 18px; 
 
} 
 
#header .branding .offcanvas-toggle:hover { 
 
    opacity: 1; 
 
}

<header id="header" class="clearfix"> 
 
    <!-- Branding --> 
 
    <div class="branding"> 
 
    <img src="http://lorempixel.com/250/45/" class="brand" ui-sref="app.dashboard" alt="MyApp"> 
 
    <img src="http://placekitten.com/50/45" class="sml-brand-img" alt="MyApp"> 
 
    <a href="javascript:;" class="offcanvas-toggle visible-xs-inline" offcanvas-sidebar><i class="fa fa-bars"></i></a> 
 
    </div> 
 
    <!-- Branding end --> 
 
</header>