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

【问题标题】：Auto adjust the height for full width image filter自动调整全宽图像过滤器的高度
【发布时间】：2017-03-25 13:17:40
【问题描述】：

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

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

【问题讨论】：

    标签： javascript jquery html height autoresize


    【解决方案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>

    【讨论】：

    • 不，不能。当我删除代码时，图像不会显示。
    • 请查看我更新的答案。我写了一些 js 来更新画廊元素的高度以具有完整的高度。
    • 没有间隙，但图像被裁剪
    • 请检查更新的代码。我试图删除空间。您可能需要做一些 CSS 修复
    • 我无法输入fixed and bottom 0，因为我的代码用于滚动一页。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-04
    • 1970-01-01
    • 2020-11-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode