小贝子编程

自动调整高度为全宽度图像过滤器



我从这里修改了代码，使图像可以全宽显示。但我面临一个问题，高度不能自动调整大小在不同的屏幕尺寸。

您可以调整浏览器窗口的大小以产生更多的输出。如果这样做，您将看到图像和"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>

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

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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium