<a> выше, чем его дочерний элемент <img>

На моем веб-сайте изображение баннера имеет определенную высоту (адаптивную), но имеет оверлей (#vignette), который вложен внутри тега a вместе с изображением баннера. #vignette получает высоту от своего родителя:

#vignette  {
    box-shadow: inset 0 0 50px 4px rgba(0,0,0,0.35), inset 0 10px 10px rgba(0,0,0,0.05);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

А тег a регулирует высоту в соответствии с содержимым:

a#banner-image {
    display: block;
    position: relative;
    width: auto;
    height: auto;
}

Как же тогда а-тег может быть выше самого изображения? Кажется, не могу решить эту проблему. Спасибо.