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

Question

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

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

这里是 old jsfiddle问题。

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

您也可以 check out this link它具有固定宽度的图像，排序看起来不错，但随后它们会在较小的屏幕尺寸下堆叠在一起。

更新:好的，我已经通过使用 max-width: 390px; 和 max-height: 390px; 解决了桌面宽度的问题在我的 .portfolio img 类(class)中。但现在在较低的分辨率(平板电脑等)上，图像又变大了。解决此问题的最佳方法是使用媒体查询或任何建议吗？我现在意识到 bootstrap 被设计为移动优先，但我相信我的代码太过分了，你们有什么建议。

Answer 1

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

解决了这个问题:

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

并使用媒体查询来限制图像在每个视口(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/