如何在离子卡上添加离子化身？像下面的图片

-2

我是Ionic的新手。我正在尝试为this.这样的简介页创建离子卡。基本上，我想在离子卡顶部使用离子化身，如image.如何在离子卡上添加离子化身？像下面的图片

我该怎么做？

下面是代码：

#content { 
 
    position: relative; 
 
    // margin-top: auto; 
 
    background-color: green; 
 
    box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.4); 
 
    padding-top: 200px; 
 
} 
 

 
#profile-info { 
 
    position: absolute; 
 
    top: -95px; 
 
    width: 100%; 
 
    z-index: 2; 
 
    text-align: center; 
 
} 
 

 
#profile-image { 
 
    display: block; 
 
    border-radius: 120px; 
 
    border: 1px solid #fff; 
 
    width: 128px; 
 
    height: 128px; 
 
    margin: 30px auto 0; 
 
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7); 
 
}

<ion-content has-header="true"> 
 
    <ion-card id="content"> 
 
    <ion-avatar id="profile-info"> 
 
     <img id="profile-image" src="img/bg.jpg"> 
 
    </ion-avatar> 
 
    </ion-card> 
 
</ion-content>

来源

2017-07-25 JBhatt

显示一些代码，到目前为止你做了什么？ –

@ GabrielBarreto编辑了这个问题。增加了代码。到目前为止，我能够获得离子卡上的头像，但只有一半，但不是全面的。 – JBhatt

你只是缺少一些CSS参数为#content元素：

height: 150px; 
width: 100%; 
display: block; 
margin-top: 100px;

演示：Fiddle

来源

2017-07-25 18:30:52 trevorp

@ GabrielBarreto谢谢你的回答。后来我意识到它的css参数的bcz丢失了。我仍然有一个问题，这是手动设置的CSS。所以当我在IOS上检查它时，化身和卡组件的位置完全改变了。你知道一种设置方式，以便它们不会在不同的设备上更改，看起来相同或响应。 – JBhatt

你可以截屏或使用小提琴重现吗？当我把上面的小提琴收缩到一个狭窄的尺寸时，它仍然保持居中并定位正确。 – trevorp

如何在离子卡上添加离子化身？像下面的图片

回答

相关问题