当父母没有固定的宽度时，孩子的身高100%

Question

好的，我在我的投资组合部分遇到了一些让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;
}

任何帮助都是非常感谢的！

您还可以看到这里的直播版本，只需转到portfolio部分并悬停一个图像。

Answer 1

更改范围。投资组合-从显示:表到显示:块

Answer 2

尝试使用像素中的原始图像或任何图像高度的高度

height:388px

谢谢