Question

我正在尝试将按钮和图像放在导航栏div中。最终发生的事情是按钮最终位于<div>内，但图片的范围超出了<div>：

@import url(https://fonts.googleapis.com/css?family=Roboto);

#navbar {
  border-bottom: solid;
  border-color: gray;
  border-width: 1%;
  height: 6%;
  background: black;
  padding: 0.25%;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
  margin: 1%;
  margin-top: 0%; !important
}
#logo {
  width: auto;
}
.link-buttons {
  float: right;
}

<html>

  <!-- navigation bar -->
  <div id="navbar">
    <ul>
      <!--  nav bar buttons -->
      <li id="logo"><span><img id="logo" src="logo-transparent.gif"/></span></li>
      <li class="link-buttons"><button>Join the team!</button></li>
      <li class="link-buttons"><button>Attend a class!</button></li>
      <li class="link-buttons"><button>Contact Us!</button></li>
    </ul>
  </div>

  <!-- content -->
  <div id="container">
  </div>
</html>

Answer 1

您可以使用此代码：

  #logo {
    width: auto;
    height:100%;
   }

Answer 2

看到这一点。

	.container-box {
    position:relative;
}
.container-box img {
      position:absolute;
    top:20px;
    left:5%;
	background-color:transparent !important;
}
.link-buttons {
  float: right;
  padding:8px 8px 0px 0px;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-box">
    <div style="width: 100%; height: 50px; background-color: #000000">
    	<li class="link-buttons"><button>Join the team!</button></li>
          <li class="link-buttons"><button>Attend a class!</button></li>
          <li class="link-buttons"><button>Contact Us!</button></li>
    </div>
    <div style="width: 100%; height: 120px; background-color: #ffffff"></div>
    <div class="image">
        <img class="img-responsive" src="http://s31.postimg.org/7t5144zsr/image.png" width="200" />
    </div>
</div>

Answer 3

只需指定宽高/高度（以像素为单位），即宽高比不会被篡改，图像将放在标题内。

所以请继续

#logo{
 width: 50px;
}

OR

#logo{
width:30%;
}

PS：必须根据您的要求更改宽度值。

在<div>中拟合图像

3 个答案: