如何替换 offcanvas 图像？答案

【问题标题】：How to replace the offcanvas image?如何替换 offcanvas 图像？
【发布时间】：2023-03-10 19:57:01
【问题描述】：

我正在构建一个菜单，我希望在大屏幕上使用完整的徽标，如果图像是画布图像，则使用简短的徽标（仅包含产品品牌图像）。

我目前的 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> 标签中？

感谢您的帮助。

【问题讨论】：

标签： jquery html css sass

【解决方案1】：

首先，您在代码中没有注意到的一件小事。在 SCSS 中，您提到了#header。但是在 html 中，没有id 属性。无论如何，在下面的 sn-p 中，我删除了背景颜色变量和过渡以简化代码。我猜 sn-p 只支持 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>

【讨论】：