如何将图像高度提供给其父级

Question

我有一些代码：

<section class="header">
    <img src="http://hsto.org/getpro/tmtm-sb/megapost/110/39f/2e2/11039f2e2b5678a644a57a75ec6daa16.jpg" alt=""/>
    <div class="middle-text">
        vertical-align middle text by image height
    </div>
</section>

我正在尝试创建一个具有任何高度的响应图像的部分。我希望它的父母有相同的身高。

中间文字可能有不同的高度。 img 可能有不同的高度。

看看我想要这张图片

像这样的Sass

section.header
 position: relative
 background-size: cover
 overflow: hidden
 z-index: 2
 img
   max-width: 100%
.middle-text
  height: auto
  display: table
  .inside
    display: table-cell
    vertical-align: middle

Answer 1

我用更多的标记来做这样的事情：

<section class="header">
    <img src="http://hsto.org/getpro/tmtm-sb/megapost/110/39f/2e2/11039f2e2b5678a644a57a75ec6daa16.jpg" alt=""/>
    <div class="middle-text">
        <div class="middle-text__table">
            <div class="middle-text-table__inner">
                vertical-align middle text by image height
            </div>
        </div>
    </div>
</section>

.header {
    position: relative;
}
.header > img {
    width: 100%;
    height: auto;
}
.middle-text {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
.middle-text__table {
    display: table;
    width: 100%;
    height: 100%;
}
.middle-text-table__inner {
    display: table-cell;
    vertical-align: middle;
}

jsFiddle：http://jsfiddle.net/qma9tdkz/2/

Answer 2

制作position absolute，然后使用margin-top

向上移动文字

  

DEMO：http://jsfiddle.net/tsx5vbdz/

.middle-text{
     height: auto;
     display: table;
     z-index:15;
     margin-top:-20%;
     margin-left:10%;
     color: white;
     vertical-align: middle;
     position:absolute;
}