好的,我正在使用 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 被设计为移动优先,但我相信我的代码太过分了,你们有什么建议。
最佳答案
我通过将我的投资组合 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;
}
}
关于javascript - 使用媒体查询调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22873219/