javascript - 当我裁剪照片时，它们最终将标题隐藏在缩略图中

Question

当我裁剪照片时，它们最终将标题隐藏在缩略图内。我该怎么做才能使字幕内容出现并使图像具有相同的高度。

我想实现这样的目标![][2]

$( document ).ready(function() {
    var heights = $(".thumnbnail").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".thumnbnail").height(maxHeight);
});

.thumbnail {
 height: 200px;
 width: 300px;
 overflow: hidden;
}
.thumbnail img {
 height: auto;
 width: 600px;
}

<div class="row">
    <div class="col-md-3">
        <a href="#">
        <div class="thumbnail">
                <img src="http://ksassets.timeincuk.net/wp/uploads/sites/55/2017/11/GettyImages-873359588-920x584.jpg" alt="osooabina"  class="img-responsive image thumbnail">
                <div class="caption">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
                </div>                
        </div>
        </a>
    </div>    
    <div class="col-md-3">
        <a href="#">
            <div class="thumbnail">
                <img src="https://i.pinimg.com/736x/22/5e/80/225e80ea57b247c188ac160ed34fe3cf--ariana-grande-tattoos-ariana-grande-no-makeup.jpg" alt="" class="img-responsive">
                <div class="caption">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
                </div>
            </div>  
        </a>
    </div>    
    <div class="col-md-3">
        <a href="#">
            <div class="thumbnail">
                <img src="http://gazettereview.com/wp-content/uploads/2015/12/Eminem-Featured-image.jpg" alt="osooabina"  class="img-responsive image thumbnail">
                <div class="caption">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
                </div>
            </div>
        </a> 
    </div>  
    <div class="col-md-3">
        <a href="#">
            <div class="thumbnail">
                <img src="https://www.biography.com/.image/t_share/MTQ3MzM3MTcxNjA5NTkzNjQ3/ariana_grande_photo_jon_kopaloff_getty_images_465687098.jpg" alt="" class="img-responsive">
                <div class="caption">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
                </div>                
            </div>  
        </a>  
    </div>              
</div>

如何使这段代码看起来像上图中的代码。

Answer 1

我相信您遇到的问题与您重复使用 .thumbnail 有关。 .您正在将其应用于 <div>和 <img>并且您的 jQuery 脚本尝试应用 maxHeight对两者。

如果我们将您的代码修改为如下所示:

$( document ).ready(function() {
    var heights = $(".thumbnail").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".thumbnail").height(maxHeight);
});

.thumbnail {
  overflow: hidden;
}

.thumbnail img {
  height: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <a href="#">
        <div class="thumbnail">
          <img src="http://ksassets.timeincuk.net/wp/uploads/sites/55/2017/11/GettyImages-873359588-920x584.jpg" alt="osooabina"  class="img-responsive">
          <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.</div>                
        </div>
      </a>
    </div>    
    
    <div class="col-xs-3">
      <a href="#">
        <div class="thumbnail">
          <img src="https://i.pinimg.com/736x/22/5e/80/225e80ea57b247c188ac160ed34fe3cf--ariana-grande-tattoos-ariana-grande-no-makeup.jpg" alt="" class="img-responsive">
          <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.</div>
        </div>  
      </a>
    </div>    

    <div class="col-xs-3">
      <a href="#">
        <div class="thumbnail">
          <img src="http://gazettereview.com/wp-content/uploads/2015/12/Eminem-Featured-image.jpg" alt="osooabina"  class="img-responsive">
          <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.</div>
        </div>
      </a> 
    </div>  

    <div class="col-xs-3">
      <a href="#">
        <div class="thumbnail">
          <img src="https://www.biography.com/.image/t_share/MTQ3MzM3MTcxNjA5NTkzNjQ3/ariana_grande_photo_jon_kopaloff_getty_images_465687098.jpg" alt="" class="img-responsive">
          <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.</div>
        </div>
      </a> 
    </div>  
  </div>
</div>

您会得到更类似于您的源图像的东西。请注意，这并没有解决实际图像尺寸相同的问题；它只是确保您的 .thumbnail wrapper 的高度都相同。

我还建议您将其转换为在页面加载时和发生窗口调整大小事件时运行的函数。