100% высота абсолютно позиционированного элемента

Я пытаюсь настроить якорь, который автоматически растягивается, чтобы соответствовать размерам изображения, которое используется в качестве фона. Кроме того, текст привязки должен быть как по горизонтали, так и по вертикали. Здесь моя текущая разметка HTML:

<div class="wrap">
    <img src="http://placehold.it/350x150">
    <a href="#">
        <span>Anchor</span>
    </a>
</div>

Идея заключается в том, что мой .wrap - это текучий столбец сетки, поэтому изображение растягивается в соответствии с шириной и высотой, определяется отношением изображения. Анкер отображается как table для вертикального выравнивания, а span имеет background видимый при hover на якорь. Есть мой CSS:

* {
    box-sizing: border-box;
}

body {
    height: 100%;    
}

.wrap {
    height: auto;
    margin: 2em;
    overflow: hidden;
    padding: 1em;
    position: relative;
    width: 80%;
}

.wrap img {
    width: 100%;
}

.wrap a {
    display: table;
    height: 100%;
    left: 1em;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 1em;
    width: 100%;    
}

.wrap a span {
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;    
}

.wrap a:hover span {
    background: red;    
}

Проблема у меня - это высота якоря, она отказывается заполнить контейнер. Здесь у вас есть скрипка: http://jsfiddle.net/xuxG5/3/

Я попытался изучить другие вопросы, но, к сожалению, ни одна из них не соответствовала моей проблеме - это комбинация 100% таблицы высот в жидкой родительской высоте, но наиболее распространенным ответом было установить высоту родителя, и абсолютная позиция не делает это проще.

Вопрос, отредактированный для отображения якорного текста, не всегда имеет только одну строку текста

Я надеялся, что вы сможете мне помочь, если есть решение для CSS, иначе я буду использовать простой скрипт JS.