javascript - Resizing images to fit in a container perfectly -

i searched question on over here , found couple of examples , tried 1 in particular, not working @ wanting to.

i have set container's height 600px , not coming close. sure due image width being 33%, there way these taller @ or stuck height being tall?

i don't why far right image isn't going top of container. @ least want that.

is there anyway adjust height these images or pull out of proportion?

$(window).load(function(){   $('.home-img-block').find('img').each(function(){    var imgclass = (this.width/this.height > 1) ? 'wide' : 'tall';    $(this).addclass(imgclass);   })  })

#home-img-blocks {  	width: 100%;  	height: 600px;  }  /*#home-img-blocks-container {  	border: 1px solid black;  }*/  .home-img-block {  	width: 33%;  	height: 100%;  	border: 1px solid black;  	display: inline-block;  }  .home-img-block img.wide {  	max-width: 100%;      max-height: 100%;  	max-width: 100%;  	height: auto;  }  .home-img-block img.tall {  	max-width: 100%;      max-height: 100%;  	max-width: 100%;  	width: auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="home-img-blocks">  	<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">     </div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>  </div>

following way can cover whole height of container. remove max-width image , give vertical-align:top , overflow: hidden; container.

but not that, cut image because not maintain aspect ratio height high , width small.

$(window).load(function(){   $('.home-img-block').find('img').each(function(){    var imgclass = (this.width/this.height > 1) ? 'wide' : 'tall';    $(this).addclass(imgclass);   })  })

#home-img-blocks {  	width: 100%;  	height: 600px;  }  /*#home-img-blocks-container {  	border: 1px solid black;  }*/  .home-img-block {  	width: 33%;  	height: 100%;  	border: 1px solid black;  	display: inline-block;    overflow: hidden;      vertical-align: top;  }  .home-img-block img.wide {  	      max-height: 100%;  	  }  .home-img-block img.tall {  	max-width: 100%;      max-height: 100%;  	max-width: 100%;  	width: auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="home-img-blocks">  	<div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">     </div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>  </div>