gpt4 book ai didi

html - Ionic - 巨大的标志没有完全显示

转载 作者:行者123 更新时间:2023-11-28 02:41:07 26 4
gpt4 key购买 nike

我对 ionic 很陌生。试图将漂亮的图片放入标题中。所以在我在 index.html 中添加 ion-nav-title 之后它就变成了这样 http://imgur.com/a/XzCpS , 图片太大了。我需要完全显示图像,并且顶部导航栏不会阻止页面的形式。非常感谢所有帮助:)

index.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">
<title></title>

<link rel="manifest" href="manifest.json">

<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="lib/ngStorage.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar bar-header navBar" align-title="center">

<ion-nav-back-button>
</ion-nav-back-button>

<ion-nav-title>
<img alt="Company Logo" height="100" src="img/logo.png">
</ion-nav-title>


</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>

style.css*

.navBar {
height: 100px;
background: #fffef1;
}

Eventsearch.html

<ion-view>
<ion-content padding="true" class="has-header">
<form id="othername-form1" class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date">
</label>
<label class="item item-select" >
<span class="input-label">Country</span>
<select ng-model="selected">
<option>Hong Kong</option>
<option>Tokyo</option>
<option>Paris</option>
</select>
</label>
</form>
<a class="button button-positive button-block" ui-sref="tab.schedule({country:selected})">Go</a>
<p>You are searching for events in {{selected}}</p>
</ion-content>
</ion-view>

最佳答案

尝试将高度设置为 auto 并将最大值设置为一个巨大的值:

.navBar {
height: 100;
background: #fffef1;
}

ion-nav-title {
height: 100;
}

关于html - Ionic - 巨大的标志没有完全显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44441542/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com