Fitting an image inside a

Question

I'm trying to fit the buttons and the image inside the navbar div. What ends up happening is that the buttons end up within the <div>, but the image extends way beyond the <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>

check out this link: [http://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio](http://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio) — Farhad, Apr 22 '16 at 07:54
I think you need to mention a width and height to your logo...can you please provide a jsfiddle as Fiido said. — satya, Apr 22 '16 at 07:54
Do not use same id for multiple elements. "Id"s are mean to be used one per page.

score 0 · Answer 1 · edited Apr 22 '16 at 09:16

0

You can use this code:

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

edited Apr 22 '16 at 09:16

Rasik

893
1
8
30

answered Apr 22 '16 at 08:19

vasanth

13
4

Ram_UI · Answer 2 · 2016-04-22T10:38:53.077

see this.

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

score -1 · Answer 3 · answered Apr 22 '16 at 08:38

Just specify the width/height in pixels/% that way the aspect ratio won't be tampered and the image will be placed inside the header.

so just go ahead with

#logo{
 width: 50px;
}

OR

#logo{
width:30%;
}

PS: The value of width must be changed as per your requirement.

Fitting an image inside a

3 Answers3