Auto adjust the height for full width image filter
<p>I have amended the code from <a href="http://oinutter.co.uk/guggenheim.js" rel="nofollow noreferrer">here</a>, so that the images can be displayed in full width. But I'm facing one issue, which the height cannot auto resize on different screen size. </p>

<p>You can resize the browser window to produce more outputs. If you do so, you will see there is a big gap between the images and the <code>"testing"</code> text. The gap is causing by the code <code>height:117vh</code>. My problem is here. </p>

<p>I have no idea how to amend the code for auto adjust the height, and I used CSS to replace it, which is not a good solution. Hoping that some of you could provide me with some advice. Thanks.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function filterEls(category){
  gallery.filter(category)
};

$('.filter-bt').click(function(){
  $('.filter-bt.current').removeClass('current');
  $(this).addClass('current'); 

});

window.onload = function(){ 
  gallery = guggenheim('#basic-gallery')
};


//Refresh page on resize
$(window).resize(function(){
  if ($(window).width() &gt; 1000){ 
    window.addEventListener('resize', function () { 
      "use strict";
      window.location.reload(); 
    });
  } 
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.gallery{
  width:100%;
  padding:0;
  height:117vh; 
  /*text-align:center;*/
  position:relative;
  overflow:hidden;
}

.works-tab-filter{
  position: static;
  text-align: center;
}

.works-tab-filter a{
  padding: 0 40px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: 1px;
}

.buttons a.prev, .buttons a.next{
  position:absolute;
  top:46%;
  z-index: 100;
}

.buttons a.prev{ left:0; background: #000; }
.buttons a.next{ right:0; background: #000; }

.buttons a.prev, .buttons a.next{
  cursor:pointer;
  display:inline-block;
  width: 43px; 
  height: 72px; 
 }

.guggenheim-item{
  width:25%;
  padding:0;
  margin: -2px 0;
}
 
.sprite {width:100%; display: inline-block; }
.sprite img{width:100%; }

@media only screen and (max-width: 1049px){
 .gallery{
  width:100%;
  height:145vh;
  padding: 0 2%;
 }
 
 .guggenheim-item{
  width:48%;
 }
}

@media only screen and (max-width: 768px) {
 .gallery{
  width:100%;
  height:200vh;
  padding: 0 2%;
 }
 
 .guggenheim-item{
  width:90%;
 }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://oinutter.co.uk/guggenheim.js/js/guggenheim.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="works-tab-filter col-md-4 wp2 delay-105s"&gt;
 &lt;a class="filter-bt current" onclick='filterEls("")'&gt;All&lt;/a&gt;
 &lt;a class="filter-bt" onclick='filterEls("campaign")'&gt;Campaign&lt;/a&gt;
 &lt;a class="filter-bt" onclick='filterEls("identity")'&gt;Identity&lt;/a&gt;
 &lt;a class="filter-bt" onclick='filterEls("interactive")'&gt;Interactive&lt;/a&gt;
 &lt;a class="filter-bt" onclick='filterEls("prints")'&gt;Prints&lt;/a&gt;
&lt;/div&gt;
 
&lt;br/&gt;
&lt;br/&gt;

&lt;div id="basic-gallery" class="gallery col-md-4 wp2 delay-2s"&gt;
 &lt;div class="buttons"&gt; &lt;!-- Hide button when only one page --&gt;
  &lt;a class="prev" onclick="gallery.prev()"&gt;&lt;/a&gt;
  &lt;a class="next" onclick="gallery.next()"&gt;&lt;/a&gt;
 &lt;/div&gt;
 
 &lt;div class="guggenheim-slider"&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/e462eq451/aa_01.jpg"  /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/e462eq451/aa_01.jpg"  /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
      &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/e462eq451/aa_01.jpg"  /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
        &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/e462eq451/aa_01.jpg"  /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/e462eq451/aa_01.jpg"  /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item campaign prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="guggenheim-item identity prints"&gt;
   &lt;span class="sprite"&gt;
    &lt;img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;testing&lt;/div&gt;</code></pre>
</div>
</div>
</p>