Html 如何将图像高度获取到其父级

我有一些代码：

<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>

---

我会这样做，再加一点标记：

<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;
}

按图像高度垂直对齐中间文本
.标题{
位置：相对位置；
}
.header>img{
宽度：100%；
高度：自动；
}
.中间文本{
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
}
.中间文本表格{
显示：表格；
宽度：100%；
身高：100%；
}
.中间文本表格{
显示：表格单元格；
垂直对齐：中间对齐；
}

---

jsiddle:

使

位置为绝对位置

，并使用

边距顶部向上移动文本

演示：

---

如果您的图像宽度：100%；高度：自动，并且在您的分区上没有设置高度，它将随图像增长。我还假设您希望图像是fullscreen@Isis您必须使用绝对定位，例如

。标题{position:relative}

，然后使用

。中间文本{position:absolute；top:50%，left:20%，max height:20px；margin top:-10px；}

，同时将图像保持为

宽度：100%

。。。。。。。。。。。。如果这就是你所有的HTML，这个解决方案应该可以工作！有一个（css3）技巧，像这样：

top:50%；转换：翻译（0,50%）<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;
}

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