html - make image height fit inside the screen -


i have image inside bootstrap code

<header> header </header>  <div class="container">  <div class="col-md-8"> <div class="col-image"> <img src="my-image.jpg" > <div> </div><!--col-md-8-->  <div> comments </div>   <div class="col-md-4"> sidebar </div><!--col-md-4-->  </div><!--container-->  <footer> footer </footer> 

i want image height inside screen of size. responsive height

i try adding height:auto; max-height:100vh; didnt work @ all. appropriated.

the image parents should height defined. so, can set max-height, or height. search heitgh in percent ;)

ps.: see in full page

.col-image{    height: 100vh;    border: 1px solid red;  }  img{    float:left;    max-height: 100%;    height: 100%  }
<header>  header  </header>    <div class="container">    <div class="col-md-8">  <div class="col-image">  <img src="http://papodeturista.com/wp-content/uploads/2016/02/arvore.jpg" >  <div>  </div><!--col-md-8-->    <div>  comments  </div>      <div class="col-md-4">  sidebar  </div><!--col-md-4-->    </div><!--container-->    <footer>  footer  </footer>


Comments

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

unity3d - Rotate an object to face an opposite direction -

javascript - Why jQuery Select box change event is now working? -