如何使图像高度达到 parent

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>

我正在尝试制作一个具有任意高度的响应图像的部分。我希望它的 parent 具有相同的高度。

中间文本可能有不同的高度。 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;
}

如何使图像高度达到 parent

How to get image height to its parent

html

css

responsive-design