Como convierto mis imágenes a responsive?

[Kome]

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

	}

[lauser]

Asi:

Código Code:

img {
height: auto;
max-width: 100%;
}