gpt4 book ai didi

html - 图像未在导航栏中正确调整大小。 { Bootstrap }

转载 作者:太空宇宙 更新时间:2023-11-04 08:50:32 25 4
gpt4 key购买 nike

我试图在 Bootstrap 中插入我的品牌标志,但我遇到了调整它的大困难。保存的图像大小为“200X150”,但比查看时小得多。

一旦应用于

<a class="navbar-brand" href="#">
<img src="img/rsz_arabella.png" alt="">
</a>

它出现在导航栏下方,显然需要调整大小以适合内部。我尝试将 img 设置为最大宽度:100%,最大高度:100%。它适合 navbar-brand,但它变得太小而无法查看。我是否将图像保存为不正确的尺寸?我定位不正确吗?

请在页面底部查看我的品牌形象。

谢谢。

<body>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/rsz_arabella.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</body>

My Brand logo

最佳答案

试试这个:

.navbar-brand {
height: auto;
}

img {
max-width:100%;
}

关于html - 图像未在导航栏中正确调整大小。 { Bootstrap },我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43467728/

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