0
我修改了here的代碼，以便圖像可以全寬顯示。但是我面臨的一個問題是，高度無法在不同的屏幕尺寸上自動調整大小。自動調整全寬圖像過濾器的高度
您可以調整瀏覽器窗口的大小以產生更多輸出。如果你這樣做，你會看到圖像和文字之間有很大的差距。差距是由代碼height:117vh造成的。我的問題在這裏。
我不知道如何修改自動調整高度的代碼，我用CSS來代替它，這不是一個好的解決方案。希望你們中的一些人能夠向我提供一些建議。謝謝。
function filterEls(category){
gallery.filter(category)
};
$('.filter-bt').click(function(){
$('.filter-bt.current').removeClass('current');
$(this).addClass('current');
});
window.onload = function(){ \t
gallery = guggenheim('#basic-gallery')
};
//Refresh page on resize
$(window).resize(function(){
if ($(window).width() > 1000){ \t
window.addEventListener('resize', function() {
"use strict";
window.location.reload();
});
} \t
});.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{
\t \t cursor:pointer;
\t \t display:inline-block;
\t \t width: 43px;
\t \t height: 72px;
\t }
.guggenheim-item{
width:25%;
padding:0;
margin: -2px 0;
}
\t
.sprite {width:100%; display: inline-block; }
.sprite img{width:100%; }
@media only screen and (max-width: 1049px){
\t .gallery{
\t \t width:100%;
\t \t height:145vh;
\t \t padding: 0 2%;
\t }
\t
\t .guggenheim-item{
\t \t width:48%;
\t }
}
@media only screen and (max-width: 768px) {
\t .gallery{
\t \t width:100%;
\t \t height:200vh;
\t \t padding: 0 2%;
\t }
\t
\t .guggenheim-item{
\t \t width:90%;
\t }
}<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">
\t <a class="filter-bt current" onclick='filterEls("")'>All</a>
\t <a class="filter-bt" onclick='filterEls("campaign")'>Campaign</a>
\t <a class="filter-bt" onclick='filterEls("identity")'>Identity</a>
\t <a class="filter-bt" onclick='filterEls("interactive")'>Interactive</a>
\t <a class="filter-bt" onclick='filterEls("prints")'>Prints</a>
</div>
\t
<br/>
<br/>
<div id="basic-gallery" class="gallery col-md-4 wp2 delay-2s">
\t <div class="buttons"> <!-- Hide button when only one page -->
\t \t <a class="prev" onclick="gallery.prev()"></a>
\t \t <a class="next" onclick="gallery.next()"></a>
\t </div>
\t
\t <div class="guggenheim-slider">
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
<div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
<div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/kzuwbknzp/aa_05.jpg"/>
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/e462eq451/aa_01.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/i1tc44qyd/aa_02.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item campaign prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/5ol3ayqnp/aa_03.jpg" />
\t \t \t </span>
\t \t </div>
\t \t <div class="guggenheim-item identity prints">
\t \t \t <span class="sprite">
\t \t \t \t <img src="https://s18.postimg.org/fn61xg039/aa_04.jpg"/>
\t \t \t </span>
\t \t </div>
\t </div>
</div>
<div>testing</div>
不，不能。當我刪除代碼時，圖片不會顯示。 – Eelyn
請檢查我的更新答案。我寫了一些js來更新圖庫元素的高度以獲得完整的高度。 –
沒有差距，但圖像裁剪 – Eelyn