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

好的，我正在使用 bootstrap 3 和 Quicksand.js 制作一个可过滤的投资组合，我正在使用流沙来过滤投资组合。现在，当我的图像设置宽度和高度时，我的工作正常，但是当我将宽度和高度更改为 100% 时，排序很奇怪，图像在排序时变得更大，这会导致各种故障。

我必须使用 jquery migrate 才能进行排序，因为教程太旧了，我不知道这是否会成为我的问题的一个促成因素。

Here is 老jsfiddle http://jsfiddle.net/uv634/与这个问题。

这是更新的小提琴，其中包含我的最大高度+宽度修复 http://jsfiddle.net/uv634/1/

你也可以查看此链接 http://aliensix.com/lightningbolt/其图像具有固定宽度，排序看起来不错，但随后它们在较低的屏幕尺寸下彼此堆叠。

UPDATE:好的，我已经通过使用解决了桌面宽度的问题max-width: 390px; and max-height: 390px; on my .portfolio img班级。但现在在较低的分辨率（平板电脑等）下，图像又变大了。解决此问题的最佳方法是通过媒体查询或任何建议吗？我现在意识到引导程序被设计为移动优先，但我相信我的代码太远了，你们有什么建议。

我通过将我的投资组合 img css 更改为：

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

并使用媒体查询来限制每个视口图像的宽度和高度：

@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/ http://jsfiddle.net/uv634/2/