Question

我的website上的当前图书中有一排图像，为了使图像高度相同，我使用以下方法将图像设置为等于378的HTML图书：

 <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来实现统一性。 :)

预览

网站图像高度错误

1 个答案: