Inappropriate behavior when stretching image

Question

I have the following html code:

<figure>
    <div id="test">
        <a href="#">
            <img class="wideStretch" src="caminhodaimagem/img1.jpg" alt="Img 1" />
        </a>
    </div>
</figure>

Wishing to stretch the image without it losing its proportion, I decided to do the stretching in that way:

#test a {
    position: absolute; 
}

.wideStretch {
    /*position: absolute;*/
    height: 100%;
    width: auto;
}

figure {
    max-width: 889px;
    height: 500px;
    position: relative;
    overflow: hidden;
    margin: 100px auto;
}

However, the image is only properly stretched in Internet Explorer when I change the property position for the class wideStretch.

Why does this happen? How does the tag position <a> affects <img>?

Answer 1

This situation happens because the default value of the property display in the elements a and img mute inline for block the moment you apply the position: absolute.

That, coupled with the fact that your code only contains the height: 100% in the <img>, and not in the <a>, makes the picture only right when the position is in the <img>. When you apply height: 100% in something, it is a good idea to apply also in the upper elements (since fallback when there is no set time is the auto).

See the change I made below:

#test a {
    display: block;
    position: absolute;
    height: 100%; /* Veja que adicionei o height aqui também */
}

.wideStretch {
    /*position: absolute;*/
    height: 100%;
    width: auto;
}

figure {
    max-width: 889px;
    height: 500px;
    overflow: hidden;
    margin: 100px auto;
    position: relative;
}

I think it’s easier to understand by removing the position's:

#test a {
    /* Se você comentar qualquer um dos dois (display ou height), 
       ou os dois, não vai funcionar . A imagem só fica certa quando 
       ambos estão ativados */
    display: block;
    height: 100%; 
}

.wideStretch {
    /* O height aqui também é necessário */
    height: 100%;
    width: auto;
}

figure {
    max-width: 889px;
    height: 500px;
    overflow: hidden;
    margin: 100px auto;
}