如何在响应式缩略图上设置相同的高度

Question

我尝试将此代码添加到我的页面，但它不起作用？谁能告诉我为什么？

http://www.booclin.ovh/tom/1/test.html

var gallery = $('.photos').gallerify({ margin:10,
mode:{ maxHeight: screen.height * 0.5,
breakPoints:[
    
    
{ minWidth: 1170, columns: 4, },
{ minWidth: 970,  columns: 3, },
{ minWidth: 750,  columns: 2, },
{ maxWidth: 750,  columns: 1, }
    
    
]},lastRow:'adjust' });

.photos { margin:auto; font-size:0px; }

.photo { position: relative; }

<div class="photos">
  
<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x320">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x900">

<img class="photo" src="http://placehold.it/900x600">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x280">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x600">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x900">

<img class="photo" src="http://placehold.it/900x600">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x280">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x600">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x400">

<img class="photo" src="http://placehold.it/600x900">

<img class="photo" src="http://placehold.it/900x600">

<img class="photo" src="http://placehold.it/900x600">

</div>




<!-- Scripts -->

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://cdn.rawgit.com/xremix/xGallerify/master/dist/jquery.xgallerify.min.js"></script>

.fancyboxthumbnailsgallerybook0{ max-width: 500px; height:500px; float:left; width: 23%; margin:5px 5px 0px 5px; background-color:#1E1E1E; overflow:hidden;  }


@media (max-width: 1260px) { .fancyboxthumbnailsgallerybook0 { width: 30%; } }

@media (max-width: 1024px) { .fancyboxthumbnailsgallerybook0 { width: 47%; } }

@media (max-width: 500px)  { .fancyboxthumbnailsgallerybook0 { width: 98%; } }

<div class="right">


<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>


<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/03.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>


</div>

如何在我的 jsfiddle 中设置口粮。这正是我需要的，但我只有身高有问题。

Demo jsfiddle (NSFW)!

Answer 1

您可以将图片用作background-image并将其背景大小更改为cover。

ul,li{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
.fancyboxthumbnailsgallerybook0{
  max-width: 500px; 
  height:500px; 
  float:left;
  width: 23%; 
  margin:5px 5px 0px 5px; 
  background-color:#1E1E1E; 
  overflow:hidden;
  background-size: cover;
  background-position: center center;
}
.fancyboxthumbnailsgallerybook0 img{
  visibility: hidden;
}
@media (max-width: 1260px) { .fancyboxthumbnailsgallerybook0 { width: 30%; } }

@media (max-width: 1024px) { .fancyboxthumbnailsgallerybook0 { width: 47%; } }

@media (max-width: 500px)  { .fancyboxthumbnailsgallerybook0 { width: 98%; } }

<ul class="right">
  
<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/01.jpg')">
    <img src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/02.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/03.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/03.jpg" alt="Book 4"/>
</li>


<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/04.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/02.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/04.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>
</li>

<li class="fancyboxthumbnailsgallerybook0" style="background-image: url('http://www.starkasia.com/wp-content/uploads/book4/01.jpg')">
  <img src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>
</li>


</ul>

谢谢。