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

-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

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

回答

相關問題