4

Tenho o seguinte código html:

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

Desejando esticar a imagem sem que ela perdesse sua proporção, resolvi fazer o stretching dessa maneira:

#test a {
    position: absolute; 
}

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

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

Contudo, a imagem só fica devidamente esticada no Internet Explorer quando mudo a propriedade position para a classe wideStretch.

Por que isso ocorre? De que modo a posição da tag <a> afeta <img>?

1 Resposta 1

4

Essa situação acontece porque o valor padrão da propriedade display nos elementos a e img muda de inline para block no momento em que você aplica o position: absolute.

Isso, aliado ao fato de no seu código só existir o height: 100% no <img>, e não no <a>, faz com que a imagem só fique certa quando o position está no <img>. Quando você aplica height: 100% em algo, é uma boa ideia aplicar também nos elementos superiores (já que o fallback quando não existe uma altura definida é o auto).

Veja a mudança que fiz abaixo:

#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;
}

Acho que fica mais fácil de entender removendo os 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;
}
1
  • Muito bem apontado de ter que aplicar as mudanças aos elementos anteriores. Bastou fazer o mesmo para a div que continha a que funcionou perfeitamente, obrigado (: 5/04/2014 às 23:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .