自動調整全角圖像濾鏡的高度

Question

我已經從此處修改了代碼，以便可以全角顯示圖像。 但是我面臨一個問題，即高度無法在不同的屏幕尺寸上自動調整大小。

您可以調整瀏覽器窗口的大小以產生更多輸出。 如果這樣做，您將看到圖像和"testing"文本之間存在很大的差距。 差距是由代碼height:117vh 。 我的問題在這里。

我不知道如何修改自動調整高度的代碼，我用CSS代替了它，這不是一個好的解決方案。 希望你們中的一些可以給我一些建議。 謝謝。

 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() > 1000){ window.addEventListener('resize', function () { "use strict"; window.location.reload(); }); } }); 

 .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%; } } 

 <script src="http://oinutter.co.uk/guggenheim.js/js/guggenheim.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="works-tab-filter col-md-4 wp2 delay-105s"> <a class="filter-bt current" onclick='filterEls("")'>All</a> <a class="filter-bt" onclick='filterEls("campaign")'>Campaign</a> <a class="filter-bt" onclick='filterEls("identity")'>Identity</a> <a class="filter-bt" onclick='filterEls("interactive")'>Interactive</a> <a class="filter-bt" onclick='filterEls("prints")'>Prints</a> </div> <br/> <br/> <div id="basic-gallery" class="gallery col-md-4 wp2 delay-2s"> <div class="buttons"> <!-- Hide button when only one page --> <a class="prev" onclick="gallery.prev()"></a> <a class="next" onclick="gallery.next()"></a> </div> <div class="guggenheim-slider"> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> </div> </div> <div>testing</div> 

Answer 1

我已經更新了源並對其進行了測試。 現在正在工作。 請測試，讓我知道是否需要任何進一步的幫助

 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() > 1000){ window.addEventListener('resize', function () { "use strict"; window.location.reload(); }); } }); 

 .gallery{ width:100%; padding:0; height:calc(100%); /*text-align:center;*/ position:absolute !important; 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:calc(100%); padding: 0 2%; } .guggenheim-item{ width:48%; } } @media only screen and (max-width: 768px) { .gallery{ width:100%; height:calc(100%); padding: 0 2%; } .guggenheim-item{ width:90%; } } 

 <script src="http://oinutter.co.uk/guggenheim.js/js/guggenheim.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="works-tab-filter col-md-4 wp2 delay-105s"> <a class="filter-bt current" onclick='filterEls("")'>All</a> <a class="filter-bt" onclick='filterEls("campaign")'>Campaign</a> <a class="filter-bt" onclick='filterEls("identity")'>Identity</a> <a class="filter-bt" onclick='filterEls("interactive")'>Interactive</a> <a class="filter-bt" onclick='filterEls("prints")'>Prints</a> </div> <br/> <br/> <div id="basic-gallery" class="gallery col-md-4 wp2 delay-2s" style="padding:0"> <div class="buttons"> <!-- Hide button when only one page --> <a class="prev" onclick="gallery.prev()"></a> <a class="next" onclick="gallery.next()"></a> </div> <div class="guggenheim-slider"> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" /> </span> </div> <div class="guggenheim-item campaign prints"> <span class="sprite"> <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" /> </span> </div> <div class="guggenheim-item identity prints"> <span class="sprite"> <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/> </span> </div> </div> </div> <div style="position: fixed; bottom: 0px;">testing</div>