自动调整全宽图像滤镜的高度

时间：2016-11-11 10:16:04

标签： javascript jquery html height autoresize

我修改了here的代码，以便图像可以全宽显示。但我面临一个问题，即高度无法在不同的屏幕尺寸上自动调整大小。

您可以调整浏览器窗口的大小以产生更多输出。如果这样做，您会发现图像与"testing"文本之间存在很大差距。差距由代码height:117vh引起。我的问题在这里。

我不知道如何修改自动调整高度的代码，我用CSS代替它，这不是一个好的解决方案。希望你们中的一些人可以给我一些建议。感谢。

＆＃13;
＆＃13; 
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(); 
    });
  }	
});
＆＃13; 
.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%;
	}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我已更新我的来源并对其进行了测试。它现在正在工作。如果您需要任何进一步的帮助，请测试并告诉我

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>

相关问题
最新问题