Muy Buenas!
Estoy haciendo un pequeño sitio web y a la hora de adaptar las imágenes de mi menú me he encontrado con un ligero problema; en lugar de mantener las dimensiones requeridas, estas pasan a un formato cuadrado deformándose y perdiendo el formato rectangular de 304 x 225px inicial.
Me gustaría saber como corregir este error.
Muchas gracias de antemano.
Código HTML:
<article class="project_section">
<a class="img_link" href="#">
<img class="bottom" src="img/01_mock_up.jpg" width="304" height="225" alt="">
<img class="top" src="img/02_mock_up.jpg" width="304" height="225" alt="">
</a>
</article>
Código:
.project_section{
width: 30%;
float: left;
margin-left: 2.5%;
margin-bottom: 2.5%;
.img_link{
position: relative;
display: block;
width: 100%;
overflow: hidden;
padding-bottom: 100%;
}
img{
position:absolute;
width:100%;
height: 100%;
-webkit-transition: opacity 125ms ease-in-out;
-moz-transition: opacity 125ms ease-in-out;
-o-transition: opacity 125ms ease-in-out;
transition: opacity 125ms ease-in-out;
}
&:hover{
.top{
opacity: .0;
}
}
}