Poor behavior when stretching image

Question

Poor behavior when stretching image

Navigation

#1 by (4 votes)

4

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>

Stretching the image without it losing its aspect ratio, I decided to do the stretching this 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 position property to the wideStretch class.

Why does this occur? How does the position of the <a> tag affect <img> ?

html css internet-explorer

asked by anonymous 05.04.2014 / 16:55

1 answer

How to determine permission to use tables? Popular data programmatically x manually

score 4 · Accepted Answer

This situation occurs because the default value of the property display in the elements a and img changes from inline to block at the time you apply position: absolute .

This, coupled with the fact that in your code there is only height: 100% in <img> , not <a> , makes the image only right when position is in <img> . When you apply height: 100% to something, it's a good idea to apply also to the higher elements (since fallback when there is no defined height is 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 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;
}