stackoom
  简体   繁体   中英

Responsive Image on ionic Tab bar

 原文  2015-06-08 12:28:10  6   2    angularjs/ tabs/ ionic-framework

Question

我在项目中使用Ionic时遇到选项卡栏问题。我很想知道如何在离子选项卡栏而不是图标上设置图像，以便根据各种设备尺寸调整图像大小。

2 answers

solution1
 0  2015-06-12 09:01:30

My tabs.html look like this ... iys pretty symple 

<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>

and the related css is 

.tabs .tab-item .icon.profile {
 background-repeat: no-repeat;
 background-position:50%;
 height: 100%;
 background-image: url('../img/profile.png');
 background-size:cover;
}


.tabs .tab-item .icon.offers {
 background-repeat: no-repeat;
 background-position: 50%;
 height: 100%;
 background-image: url('../img/offer.png');
 background-size:cover;
 }


.tabs .tab-item .icon.inbox {
 background-repeat: no-repeat;
 background-position: 50%;
 height: 100%;
 background-image: url('../img/inbox.png');
 background-size:cover;
}

.tabs .tab-item .icon.share {
 background-repeat: no-repeat;
 background-position: 50%;
 height: 100%;
 background-image: url('../img/share.png');
 background-size:cover;
}

.tabs .tab-item .icon.settings {
 background-repeat: no-repeat;
 background-position: 50%;
 height: 100%;
 background-image: url('../img/setting.png');
 background-size:cover;
}

The Width of the images are 126 pixel and height 107 pixel

solution2
 0  2015-06-12 14:06:01

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;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Nested tab bar in Ionic Framework Ionic, how to set tab bar into header? ionic ion-tab icon with custom image Add image to ionic view header/title to tab How I can add slide feature for nested tab bar in ionic? Ionic: Custom tab-bar background color on comment page? ionic app not scrolling on sidemenu + tab bar UI Pattern combination How to responsive image in ionic from different screen size? How to give responsive title in ion-header-bar in ionic framework based on selected page? Responsive tab with width column
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM