Jquery 如何替换非画布图像？

我正在构建一个菜单，在大屏幕上我希望有一个完整的徽标，如果图像是非画布的，我希望有一个简短的徽标（只有产品品牌图像）

我当前的SCS：

#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>

现在的情况是，如果我缩小窗口，原来的徽标就会留在那里。我应该把替代标志放在哪里？在另一个

标签中

---

感谢您的帮助。

首先，代码中有一点您没有注意到。在SCSS中，您提到了

#标题

。但是在html中，没有

id

属性。无论如何，在我下面的代码片段中，我删除了背景颜色变量和转换，以简化代码。我想这个片段只支持css。所以我需要添加预处理的css

#标题。品牌{
浮动：左；
填充：0 15px；
}
#标题。品牌。品牌{
宽度：250px；
高度：45px；
颜色：白色；
左侧填充：10px；
填充顶部：10px；
浮动：左；
}
#标题。品牌。品牌：悬停{
文字装饰：无；
}
@介质（最大宽度：800px）{
#标题。品牌。品牌{
显示：无；
}
}
#标题.品牌.sml品牌img{
显示：无；
}
@介质（最大宽度：800px）{
#标题.品牌.sml品牌img{
显示：块；
宽度：50px；
高度：45px；
}
}
#header.branding.offcanvas切换{
颜色：白色；
左边距：5px；
不透明度：.5；
填充：1px4px；
字号：18px；
}
#header.branding.offcanvas切换：悬停{
不透明度：1；
}