Resizing images using media queries

Question

Ok so I am making a filterable portfolio with bootstrap 3 and quicksand.js, I am using quicksand to filter the portfolio. Now I had this working fine when my images were set wid

Answer 1

I resolved this issue by changing my portfolio img css to:

.portfolio img {
    max-width: 100%;
    width: 100%;
    height: auto !important;
}

And used media queries to limit the width and height on the image at each viewport:

@media (max-width:767px) {
    .portfolio img {
        max-width: 100%;
        max-height: 100%;
    }
}

@media (min-width:768px) {
    .portfolio img {
        max-width: 240px;
        max-height: 240px;
    }
}

@media (min-width:992px) {
    .portfolio img {
        max-width: 314px;
        max-height: 314px;
    }
}

@media (min-width:1200px) {
    .portfolio img {
        max-width: 380px;
        max-height: 380px;
    }
}

http://jsfiddle.net/uv634/2/