使用媒体查询调整图像大小
好的，我正在使用bootstrap 3和quicksand.js制作一个可过滤的投资组合，我使用流沙来过滤投资组合。 现在，当我的图像设置宽度和高度时，我的工作正常，但是当我将宽度和高度更改为100％时，排序很奇怪，图像在排序时会变大，这会导致各种故障。
我不得不使用jquery迁移来使排序工作，因为教程太旧了，我不知道这是否会影响我的问题。
这是问题的老问题。
这是更新的小提琴，我的最大高度+宽度修复
你也可以查看这个链接 ，它有固定宽度的图像，排序看起来很好，但然后它们在较低的屏幕尺寸上叠加在一起。
更新：好的我已经使用max-width: 390px;修复了桌面宽度的问题max-width: 390px; 和max-height: 390px; 在我的.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; } }