在側菜單（離子）

Question

我試圖把在側面菜單從Facebook獲取的，像這樣的輪廓PIC配售圖像：

但我不是有很多運氣的。

我的側面菜單代碼：

<ion-side-menus enable-menu-with-back-views="false"> 

    <ion-side-menu-content> 
    <ion-nav-bar class="bar-dark custom-header"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 

     <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
    <ion-header-bar class="bar-positive custom-header"> 
    </ion-header-bar> 
    <ion-content class="custom-sidemenu"> 
     <ion-list> 
     <ion-item class="custom-item-nav" menu-close href="#/app/home"> 
      Home 
     </ion-item> 
     <ion-item class="custom-item-nav" menu-close href="#/app/recepten"> 
      Recepten 
     </ion-item> 
     <ion-item class="custom-item-nav" menu-close href="#/app/perfect-gin"> 
      The Perfect Gin Tonic Mix 
     </ion-item> 
     <ion-item class="custom-item-nav" menu-close href="#/app/favorieten"> 
      Favorieten 
     </ion-item> 
     <ion-item class="custom-item-nav" menu-close href="#/app/contact"> 
      Contacteer ons 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 

</ion-side-menus> 

我想我不知道從哪裏把我的分度，在它的形象。

我的div代碼：

<div class="profile_frame_container"> 
     <img class="profile_frame" src="/img/profile_frame.png" alt=""> 
     <img class="profile_pic_fb" src="http://graph.facebook.com/XXXXX/picture?type=large" alt=""> 
    </div> 

Answer 1

您可以使用item-avatar CSS類。例如將其放置在<ion-side-menu>，裏面<ion-content><ul class="list">：

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
     <ion-nav-bar class="bar-positive"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
     <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
      </button> 
     </ion-nav-buttons> 
     </ion-nav-bar> 
     <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
     <ion-header-bar class="bar-assertive"> 
     <h1 class="title">Left Menu</h1> 
     </ion-header-bar> 
     <ion-content> 
     <ul class="list"> 
      <div class="item item-avatar"> 
      <img src="//ionicframework.com/img/docs/spengler.jpg"> 
      <h2>Pretty Hate Machine</h2> 
      <p>Nine Inch Nails</p> 
      </div> 
      <a href="#/event/check-in" class="item icon-left ion-home" menu-close>Home</a> 
      <a href="#/event/attendees" class="item icon ion-person-stalker" menu-close>Friends</a> 
      <a href="#/event/prices" class="item icon ion-star" menu-close>Prices</a> 
     </ul> 
     </ion-content> 
    </ion-side-menu> 
    </ion-side-menus> 

這裏是一個工作示例：

http://codepen.io/beaver71/pen/obGQXV

Answer 2

對於> ionic2

<ion-card text-center class="hide-card"> 
    <img src="http://placehold.it/300x200" class="custom-avatar"/> 
    <h2>Victorcodex</h2> 
    <p>Have some p tag here</p> 
    <p>I am the third guy inline here</p> 
    <hr> 
</ion-card> 

.hide-card { 
    -webkit-box-shadow: none!important; 
} 

.custom-avatar { 
    height: 30vw; 
    width: 30vw; 
    border: 1px solid #fff; 
    border-radius: 50%; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
} 

待辦事項還是讓我知道是否這很有用。