Html 在侧菜单中放置图像(Ionic)
我正在尝试将从Facebook检索到的个人资料图片放在侧菜单中,如下所示: 但是我运气不太好 侧菜单的我的代码:Html 在侧菜单中放置图像(Ionic),html,css,ionic-framework,Html,Css,Ionic Framework,我正在尝试将从Facebook检索到的个人资料图片放在侧菜单中,如下所示: 但是我运气不太好 侧菜单的我的代码: <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-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>
您可以使用CSS类。例如,将其放置在
内
中:
左菜单
相当讨厌的机器
九寸钉
以下是一个工作示例:
对于>离子2
<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;
}
胜利者法典
这里有一些p标签
我是这里的第三个人
.隐藏卡片{
-网络工具包盒阴影:无!重要;
}
.定制化身{
高度:30vw;
宽度:30vw;
边框:1px实心#fff;
边界半径:50%;
显示:内联块;
左边距:自动;
右边距:自动;
}
让我知道这是否有用。请发布完整的html和css
<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;
}