【问题标题】:Impossible to resize a logo (image) in ion-header无法在 ion-header 中调整徽标(图像)的大小
【发布时间】:2020-07-07 23:17:37
【问题描述】:

我无法使用 Ionic 5 调整 ion-header 和 ion-toolbar 内的徽标大小,我不明白为什么...

我尝试过类似的方法:

<ion-header [translucent]="true">
  <ion-toolbar>
    <img height="44" class="logo-full" alt="mylogo">
  </ion-toolbar>
</ion-header>

还有:

.logo-full{
   content: url("../assets/logo/logo-dark.png");
   height: 44px;
}

我尝试调整标题和工具栏的大小,删除工具栏,但似乎没有什么对我有用...

我知道这通常很简单,但是每年更新一次,很难理解......

谢谢大家!

【问题讨论】:

    标签: html css ionic-framework ionic5


    【解决方案1】:

    试试这个:

    ion-toolbar, ion-header .logo-full{
       content: url("http://placekitten.com/301/301");
       width:44px;
       height: 44px;
       border:2px solid black;
    }
    <ion-header [translucent]="true">
      <ion-toolbar>
        <img class="logo-full" alt="mylogo">
      </ion-toolbar>
    </ion-header>

    适用于 200 X 44(宽度)

    ion-toolbar, ion-header .logo-full{ 
      content: url("http://placekitten.com/301/301");
      width: 44px;
      height: 200px;
      border: 2px solid black;
    }
    <ion-header [translucent]="true">
      <ion-toolbar>
        <img class="logo-full" alt="mylogo">
      </ion-toolbar>
    </ion-header>

    【讨论】:

    • 完美,当我使用宽度而不是高度时,图像会按比例变化(我不明白为什么),但是谢谢!
    • 您也可以尝试一下,您可以固定宽度并不断增加高度,以达到您想要的效果。
    • 我刚刚修改了代码(2nd sn-p),只增加了高度和宽度。
    猜你喜欢
    • 2021-09-21
    • 1970-01-01
    • 1970-01-01
    • 2023-02-20
    • 2020-02-07
    • 2018-06-17
    • 2011-06-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多