Question

我正在尝试将图像添加到导航栏中，并将其调整为导航栏，但是我无法为此目的调整图像的大小；不管我做什么，图像都将扩展到整个页面。我对HTML和CSS还是很陌生，能否请您解释一下如何使图像适合导航栏？

#profile-image {
  height: auto;
  width: auto;
  float: left;
  padding-left: 2%;
  margin: 0 auto;
  padding: 10px 0;
}

<div class="top-padding">
  <nav>
    <div id="profile-image"><img src="profile-image.jpg"></div>
    <ul class="menu">
      <li><a href="#" class="current">About Me!</a></li>
      <li><a href="blogpage.html" title="Blogs!">My Blog Posts!</a></li>
      <li><a href="projectpage.html" title="Projects!">My Projects!</a></li>
    </ul>
  </nav>
</div>

Answer 1

尝试

#profile-image{
    height:auto;
    width:auto;
    float: left;
    padding-left: 2%;
    margin: 0 auto; 
    padding: 10px 0;
} 

#profile-image img{
    object-fit:cover;
}
nav{
    overflow:hidden;
}

我刚刚添加了nav的规则和eimage的封面

Answer 2

您希望此图像显示在导航栏上多大？假设您希望它是100px x 100px。

首先，您需要设置图像父元素的高度和宽度。我只是给ID为t::template f<int>(); // call a function template的div分别为profile-image和height: 100px。

接下来，您需要告诉width: 100px标签符合这些尺寸。我们可以通过设置样式<img />和height: 100%来做到这一点。

width: 100%

#profile-image {
  height: 100px;
  width: 100px;
  float: left;
  padding-left: 2%;
  margin: 0 auto;
  padding: 10px 0;
}
#profile-image img {
  height: 100%;
  width: 100%;
}

Answer 3

我不确定您要达到什么目的，所以这是一个猜测：

nav {
  display: flex;
  align-items: center;
  background: #eeeeee;
}

#profile-image {
  flex-basis: 20%;
  font-size: 0;
}

#profile-image img {
  width: 100%;
}

ul.menu {
  display: flex;
  margin: 0;
  justify-content: space-around;
  flex-grow: 1;
  list-style-type:none;
  padding:0;
}
ul.menu li {
  padding:10px;
}

<nav>
  <div id="profile-image"><img src="http://placekitten.com/150/150" /></div>
  <ul class="menu">
    <li><a href="#" class="current">About Me!</a></li>
    <li><a href="blogpage.html" title="Blogs!">My Blog Posts!</a></li>
    <li><a href="projectpage.html" title="Projects!">My Projects!</a></li>
  </ul>
</nav>

Answer 4

如果要“使图像适合导航栏”，则需要给导航栏指定适合图像的大小。

除非愿意，否则您可以摆脱配置文件图像div，除非您要在图像区域添加特殊样式。

我假设您希望图像像左侧的图标一样（因为您添加了float：left样式），而不是像背景图像那样覆盖整个导航栏的图像。

如果是这样的话：

nav {
   height:  150px; or whatever you want the image and the nav bar to be
 }

 #profile-image {
  height: 100% or you can use the same height as the nav style
  width: auto; That will keep the image proportions correct
  float: left;
  padding-left: 2%;
  margin: 0 auto; <== not sure what you are doing here. Try deleting it as it won't help.
  padding: 10px 0;
 }

无法使图像适合导航栏

4 个答案: