On my website, in the Current Books section, I have a row of images. To ensure that all the images are the same height, I initially set the height of the HTML book image to 378 using:
<img alt="HTML & CSS" height= "378" src="html.jpg">
Using JQuery, I then adjusted the height of the other images in the row like this:
$(window).load(function() {
$(".book-pictures").height($("#html").height());
$(".book-pictures").width($("#html").width());
});
$(window).resize(function(){
$(".book-pictures").height($("#html").height());
$(".book-pictures").width($("#html").width());
});
All the images now have uniform heights, except for the HTML book image which is slightly smaller than the others. Here is the code snippet for the row:
<section id="Book-Section" class="portfolio">
<div class="container">
<div class="row" id="books">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2 class ="small-line">Current Books</h2>
<div class="row">
<div class="col-md-3">
<div class="portfolio-item" style ="vertical-align: middle">
<h3>Pragmatic Programmer</h3>
<img alt="Pragmatic Programmer" class="img-portfolio img-responsive img-rounded book-pictures" src="http://ecx.images-amazon.com/images/I/41BKx1AxQWL._SX258_BO1,204,203,200_.jpg" >
</div>
</div>
<div class="col-md-3">
<div class="portfolio-item">
<h3>The Shellcoders Handbook</h3>
<img alt="The Shellcoders Handbook" class="img-portfolio img-responsive img-rounded book-pictures" src="http://ecx.images-amazon.com/images/I/51Gq-XXFYpL._SX395_BO1,204,203,200_.jpg">
</div>
</div>
<div class="col-md-3">
<h3>HTML & CSS </h3>
<div class="portfolio-item">
<img alt="HTML & CSS" height= "378" class="img-portfolio img-responsive img-rounded" id="html" src="http://ecx.images-amazon.com/images/I/41K27gRbYmL._SX258_BO1,204,203,200_.jpg">
</div>
</div>
<div class="col-md-3">
<h3>Cryptography Engineering</h3>
<div class="portfolio-item">
<img alt="Snowboarding Cat. Impressive." class="img-portfolio img-responsive img-rounded book-pictures" id="cat-picture" src="http://ecx.images-amazon.com/images/I/51SEhLArm%2BL._SX258_BO1,204,203,200_.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Can someone guide me on how to make these images uniform?