Changing CSS height on image not working? - html

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>Java Fundamentals</li>
<li>Java Advanced</li>
<li>Front-End</li>
<li>Test and Management</li>
<li>Java Enterprise</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;
}

Answer 3

Your should provide height to parent first before assigning to a child.
You haven't set the parents height . i.e. div's height so that it the will know what 50% means.
<div class="col-md-12" align="center" style='height:100px'>
<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>
I do not support inline styling.

Answer 4

we can set height pixel it will work
.image-size {
height:300px;
width :100%;
}
<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>
And if you want to set the height with percentage you have to set position:absolute to the image like
.image-size {
height:50%;
width:100%;
position:absolute;
left:0;
top:0;
}
<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>

Answer 5

you can use css style
.thumbnail, .image-size, src {
height: 50%;
width: 100%
}