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
Post a Comment