Ionic 如何使用离子溢出工具栏内的图像？

5cg8jx4n 于 2022-12-08 发布在 Ionic

关注(0)|答案(1)|浏览(165)

我试图溢出工具栏内的图像，像这样：
第一个
但我得到了这样的结果，头像被裁剪了：

如何在不裁剪图像的情况下实现相同的效果？
这就是我想要得到的结果：

先谢谢你。

ionic-framework

来源：https://stackoverflow.com/questions/63631755/how-to-overflow-image-inside-a-toolbar-using-ionic

1条答案

按热度按时间

2hh7jdfx1#

试试这个：

<ion-header>
  <ion-toolbar color="primary">
    <ion-button slot="start">
      <ion-icon slot="icon-only" size="large" name="exit"></ion-icon>
    </ion-button>
    <ion-button slot="end">
      <ion-icon slot="icon-only" size="large" name="create"></ion-icon>
    </ion-button>
    <ion-avatar>
      <img src="https://www.abc.net.au/news/image/8314104-1x1-940x940.jpg" />
    </ion-avatar>
  </ion-toolbar>
</ion-header>

SCSS：

ion-header {
  background: var(--ion-color-primary);
  ion-avatar {
    margin: 20px auto;
    height: 120px;
    width: 120px;
  }
}

您将得到以下输出：

我建议您也浏览一下离子成分：https://ionicframework.com/docs/components

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic 如何使用离子溢出工具栏内的图像？

1条答案

相关问题

热门标签

最新问答