使用媒体查询调整图像大小

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 widths and heights but when I change the width and height to 100% the sorting is weird, the images become bigger when they are sorting and this causes all kinds of glitches.

I had to use jquery migrate to get the sorting to work because the tutorial was so old, I dont know if this will be a contributing factor to my issue.

Here is old jsfiddle with the issue.

Here is updated fiddle, with my max height + width fix

Also you can check out this link which has the images at a fixed width, the sorting looks fine but then they stack on top of each other at lower screen sizes.

UPDATE: Okay I have fixed the issue at desktop width by using max-width: 390px; and max-height: 390px; on my .portfolio img class. But now on lower resolutions (tablets etc) the images are bigger again. Would the best way to fix this be with media queries or any suggestions? I realize now that bootstrap is designed to be mobile first but I am too far in my code I believe, what do you guys suggest.

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/