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修复了桌面宽度问题。但现在在较低分辨率（平板电脑等）上，图像再次变大。解决此问题的最佳方法是媒体查询或任何建议吗？我现在意识到引导程序首先是移动设备，但我的代码太过分了，我相信，你们有什么建议。

Answer 1

我通过将我的投资组合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/

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

1 个答案: