Changing CSS height on image not working?

Question

I cant change the height only the width works? I dont understand:)

.image-size{
  width: 100%;
  height: 50%;
}

<div class="container">
  
  <div class="row">   
  <div class="page-header">
 
    <div class="col-md-8">
    <nav class="navbar navbar-default navbar">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Lexicon</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Java Fundamentals</a></li>
      <li><a href="#">Java Advanced</a></li>
      <li><a href="#">Front-End</a></li>
      <li><a href="#">Test and Management</a></li>
      <li><a href="#">Java Enterprise</a></li>
      
    </ul>
  </div>
</nav>
    </div>
  </div>
  
 
  <div class="jumbotron">
 <div class="row">
   <div class="col-md-12" align="center">
    <img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
   </div>
    </div>
  </div>
</div>

Im using bootstrap does i have anything to do with my problem? Why does the whole image change size when i just change the width.

Answer 1

it is because the Col that contain the img don't have height and you can't give % value to image because the parent don't have any height to get the 50% of that! in other hand you can make it possible with "px";

.image-size{
  width: 100%;
  height: 250px;
}

Or add height for container Col

Answer 2

You should set specific height for parent of image (class=col-md-12)

For example:

.col-md-12{
  height: 100px;
}

.image-size{
  width: 100%;
  height: 50%;
  display: block;
}