0
hereからコードを修正して、画像を全幅で表示できるようにしました。しかし、私は1つの問題に直面しています。高さは異なる画面サイズで自動的にサイズ変更できません。全幅イメージフィルタの高さを自動調整
ブラウザウィンドウのサイズを変更して、出力を増やすことができます。そうすると、画像と"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(){ \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
更新された回答を確認してください。私はギャラリー要素の高さをフル高さに更新するためにいくつかのjを書いています。 –
隙間はありませんが画像が切り取られます – Eelyn