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>
?