离子标签栏上的响应图像

【问题标题】：Responsive Image on ionic Tab bar离子标签栏上的响应图像
【发布时间】：2015-06-08 12:28:10
【问题描述】：

我在我的项目中使用 Ionic，但标签栏出现问题。我很想知道如何在 ionic 标签栏而不是图标上设置图像，以便根据各种设备尺寸调整图像大小。

【问题讨论】：

  • 您还可以将图标调整为任意大小。只需使用 css 媒体查询，然后使用 ng-class 通过设置更大/更小的字体大小来调整图标大小。此外，由于图标都是 css，它们非常轻量级，您不必担心应用中的文件大小。
  • 感谢@Jess 的快速回复。虽然我不想在标签栏中使用任何默认的 CSS 图标和文本。我的屏幕页脚中有 5 个选项卡，并且我在它们中包含了背景图像而不是图标。现在我希望将这些图像的大小调整为与设备的屏幕大小相同。图像在某些设备上看起来不错，但是当屏幕宽度增加时，它就被搞砸了。请帮忙。
  • 你试过了吗？
  • div { 背景： url(img_flwr.gif);背景尺寸：100% 100%；背景重复：不重复； } 还有你使用的图片尺寸是多少？
  • 谢谢@JessPatton 好的，我试过了，但没有达到我的预期。让我在这里放一些我正在使用的代码。

标签： angularjs tabs ionic-framework


【解决方案1】：

我的 tabs.html 看起来像这样......我很简单

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

相关的css是

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

图片的宽度为126像素，高度为107像素

【讨论】：

    【解决方案2】：

    发现问题，选项卡项的最大宽度设置为 150 像素，如果您增加图像应该能够正确缩放，这是我的代码，即使在非常大的宽度分辨率下我也能正常工作我还设置了每个选项卡项的宽度为 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;
}

    【讨论】：

    • 谢谢@Jess ...它几乎解决了问题。只有两件事。
    • 谢谢@Jess ...它几乎解决了问题。我已经在 Firefox 上对其进行了测试，它看起来不错，但我在 chrome 中看不到任何图像。我会在晚上在移动设备中查看它，让我们看看。图像完全符合宽度，但在增加屏幕尺寸的同时，它的宽度有点失焦。我怎样才能增加默认选项卡大小...可能这就是我可以解决问题的方法。
    • 所以 .tab-item 类使用了弹性盒子。有一个最大宽度设置（默认为 150）如果你一直遇到宽度问题，你可以继续增加 maxwidt 或者我认为你可以删除最大宽度类并将每个选项卡的宽度设置为 100%，和一个高度设置为 100%（标签栏的高度由 .tabs 类设置。.tabs 类的高度设置为 49px。如果您希望标签具有更高的高度，只需更改 .tabs 类中的高度
    猜你喜欢
    • 2017-02-16
    • 2019-11-21
    • 1970-01-01
    • 2019-06-23
    • 1970-01-01
    • 2022-01-18
    • 2017-04-12
    • 2015-05-09
    • 2016-08-05
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode