好的，我在我的投资组合部分中使用height:100;时遇到了一些问题，我尝试了一系列类似问题的解决方案，但似乎没有任何效果。此外，我得到它与媒体查询一起工作，但它是一堆额外的代码，我知道有另一种方法来做到这一点，我只是想不出来！
查看我的HTML：
<!-- Begin Portfolio -->
<section id="section2">
<div class="container portfolio">
<!-- Page Title -->
<div class="row page-title-2">
<div class="col-lg-12">
<h3>Portfolio</h3>
<hr>
<p>We also create some other stuff.</p>
</div>
</div>
<!-- Portfolio Filter -->
<div class="container text-center">
<ul class="nav nav-pills">
<li class="filter" data-filter="all">all</li>
<li class="filter" data-filter="print">print</li>
<li class="filter" data-filter="web">web</li>
<li class="filter" data-filter="branding">branding</li>
<li class="filter" data-filter="branding">illustration</li>
</ul>
</div>
<!-- Portfolio Items -->
<div class="container port-holder">
<ul id="myPortfolio" class="no-padding">
<li class="item branding col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-1.html" data-target="#myModal">
<img src="img/projects/thumbs/branding1.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Beach Sand</h4>
<em>Branding</em>
</span>
</span>
</a>
</li>
<li class="item web col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-2.html" data-target="#myModal">
<img src="img/projects/thumbs/web1.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>B&W Scene</h4>
<em>Web Design</em>
</span>
</span>
</a>
</li>
<li class="item print col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-3.html" data-target="#myModal">
<img src="img/projects/thumbs/print1.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Metal</h4>
<em>Print</em>
</span>
</span>
</a>
</li>
<li class="item branding col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-4.html" data-target="#myModal">
<img src="img/projects/thumbs/branding2.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Bridge Cityscape</h4>
<em>Branding</em>
</span>
</span>
</a>
</li>
<li class="item print col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-5.html" data-target="#myModal">
<img src="img/projects/thumbs/print2.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Camera</h4>
<em>Print</em>
</span>
</span>
</a>
</li>
<li class="item branding col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-6.html" data-target="#myModal">
<img src="img/projects/thumbs/branding3.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>B&W City</h4>
<em>Branding</em>
</span>
</span>
</a>
</li>
<li class="item web col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-7.html" data-target="#myModal">
<img src="img/projects/thumbs/web2.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Objects</h4>
<em>Web Design</em>
</span>
</span>
</a>
</li>
<li class="item print col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-8.html" data-target="#myModal">
<img src="img/projects/thumbs/print3.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Paradise</h4>
<em>Print</em>
</span>
</span>
</a>
</li>
<li class="item web col-xs-4 no-padding">
<a data-toggle="modal" href="projects/project-9.html" data-target="#myModal">
<img src="img/projects/thumbs/web3.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Eary</h4>
<em>Web</em>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- End Portfolio -->
我的悬停CSS：
.portfolio ul li:hover span.portfolio-hover {
opacity: 1;
}
.portfolio img {
max-width: 100%;
width: 100%;
height: 100% !important;
}
span.portfolio-hover {
background: rgba(39,39,39,0.95);
color: #8e8e8e;
width: 100%;
height: 100%;
display: table;
left: 0;
position: absolute;
top: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.portfolio-hover span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
非常感谢任何帮助！
您还可以看到the live version here，只需转到投资组合部分并悬停图片。
答案 0 :(得分：2)
将span.portfolio-hover从display：table更改为display：block
答案 1 :(得分：0)
尝试使用原始图像中的像素高度或无论Imageheight是什么
height:388px
由于