I am using Ionic for my project and I got a problem with Tab bar.I would love to know How to set images on ionic tab bar instead of icons So that the images get re-sized based on the various device size .
Responsive Image on ionic Tab bar
6.4k views Asked by Nabarag Paul At
2
There are 2 answers
3
On
Found the problem, tab items have a max-width set of 150px, if you increase that the images should be able to scale correctly, here is my code where i got it working even at very large width resolutions I also set the width on each tab item to 100%: HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
</ion-content>
<ion-tabs class="tabs-icon-only tabs-color-active-positive">
<!-- Profile Tab -->
<ion-tab title="profile" icon-off="profile" icon-on="profile" href="#/tab/profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
<!-- offer Tab -->
<ion-tab title="offers" icon-off="offers" icon-on="offers" href="#/tab/offers">
<ion-nav-view name="tab-offers"></ion-nav-view>
</ion-tab>
<!-- inbox Tab -->
<ion-tab title="inbox" icon-off="inbox" icon-on="inbox" href="#/tab/inbox">
<ion-nav-view name="tab-inbox"></ion-nav-view>
</ion-tab>
<!-- share Tab -->
<ion-tab title="share" icon-off="share" icon-on="share" href="#/tab/share">
<ion-nav-view name="tab-share"></ion-nav-view>
</ion-tab>
<!-- settings Tab -->
<ion-tab title="settings" icon-off="settings" icon-on="settings" href="#/tab/settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-pane>
</body>
</html>
CSS:
/* Styles here */
.tab-item{
max-width: 300px;
}
.tabs .tab-item .icon.profile {
background-repeat: no-repeat;
background-position:50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-1.jpg');
background-size:cover;
}
.tabs .tab-item .icon.offers {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-7.jpg');
background-size:cover;
}
.tabs .tab-item .icon.inbox {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-2.jpg');
background-size:cover;
}
.tabs .tab-item .icon.share {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-4.jpg');
background-size:cover;
}
.tabs .tab-item .icon.settings {
background-repeat: no-repeat;
background-position: 50%;
height: 100%;
width: 100%;
background-image: url('http://dreamatico.com/data_images/car/car-5.jpg');
background-size:cover;
}
My tabs.html look like this ... iys pretty symple
and the related css is
The Width of the images are 126 pixel and height 107 pixel