jquery - 网站上的图像高度错误

Question

我的 website 上的 Current Books 中有一排图片，为了使图像具有相同的高度，我使用以下方法将图像设置为 HTML 书籍等于 378:

 <img alt="HTML & CSS" height= "378" src="html.jpg">  

使用 JQuery，我设置行中其他图像的高度:

 $(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()); 

});

这些图片的高度都是统一的，这很好，但是HTML书籍图片的高度比其他的略小。这是该行的 html:

<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>

有人可以帮我把这些图片统一化吗？

Answer 1

这不是图像，而是错误的。这是他们上面的文字。所以，给出类似的东西:

h3 {
  overflow: hidden;
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

这将使上面的所有标题都在一行中，您不需要使用 jQuery 或 JavaScript 来实现统一。 :)

预览