将div的高度设置为与背景图像的高度相同的最佳方法是什么？

Question

这是我的主页

我左侧有一个图像，右侧有一个div。

我的目标是让我的右侧div与我的图像高度具有相同的高度，但我不知道如何实现这一点。

图片样式

.hero {

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

正确的div风格

.hero-right {
    position: relative;
    z-index: 3;
    text-align: center;
    background-color: #414141;
    height: 100%;
}

HTML

    

    {{-- Left --}}
    <div class=" hero-left col-xs-12 col-sm-7 col-md-7  col-lg-9">
        <img src="../img/hero-slider/1.jpg" class="hero image-responsive">
    </div>


    {{-- Right --}}
    <div class=" hero-right col-xs-12 col-sm-5 col-md-5 col-lg-3 pull-right" style="background-color: #414141;">

        <div class="hero-slider">
            <div class="slide">

                <div class="col-lg-12 col-md-12 col-sm-12 animated fadeInUp">
                    <h3 style="margin-top:20px;">
                        TUTTI.ED
                    </h3>
                    <h4>EFFECTIVE DIGITAL LEARNING</h4>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></p>

                    <p>Tutti.ed is our educational software platform that empowers leading education companies to bring state-of-the-art digital learning products to market quickly.</p>

                </div>


            </div>
            <div class="slide">
                <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12   animated fadeInUp">
                    <h3 style="margin-top:20px;">
                        TUTTI.DEV
                    </h3>
                    <h4>BY DEVELOPERS, FOR DEVELOPERS</h4>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></p>

                    <p>Tutti.dev is our cloud application suite that enables software teams to work more effectively and efficiently.  Get it together with Tutti!</p>

                </div>
            </div>
            <div class="slide">

                <div class="col-lg-12 col-md-12 col-sm-12 animated fadeInUp">
                    <h2 style="margin-top:20px;">WHY </h2>
                    <h3> AVENIROS?</h3>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></p>

                    <p>Our team has been building content delivery platforms for over 20 years. We have experience with development from large scale LMS installations to mobile applications. We can offer full turn-key technical services for your content or help your technical team get to market on time.
                    </p>

                </div>

            </div>

            <div class="slide">

                <div class="col-lg-12 col-md-12 col-sm-12 animated fadeInUp">
                    <h3 style="margin-top:20px;">
                        TUTTI.ED </h3><h2>with</h2><h3> Learnosity
                    </h3>

                    <p class="hr"><span></span><i class="fa fa-times"></i><span></span></p>

                    <p>Interested in bringing your assessments online or augmenting the digital content you already have?  Click here to see how Tutti.ed with Learnosity can help.
                    </p>
                    {{-- <a class="btn btn-primary" href="#" data-scrollTo="#about">About us</a> --}}
                </div>


            </div>


        </div>


    </div>
</div>

Here is my JSFiddle