Javascript FlexImages在移动设备上调整网格图像大小

我正在使用fleximagesjquery插件来调整网格。它工作得很好。我唯一的问题是我希望图像在移动设备上是100%宽度（查看端口550px或更小）

jQuery Fleximage插件：

代码：

我创建了一个JSFIDLE，您可以从下面的链接中看到它

我试着在下面添加css，但运气不好

@media (max-width:550px) {
.flex-images > div.item {
    display: block;
    width: 100%;
}
}

我尝试了所有我能想到的css技巧，但没有任何帮助。有人能告诉我怎么做吗

问候

@media only screen and (max-width: 550px) {
  .flex-images .item {
    width: 100% !important;
  }
  .flex-images .item img {
    width: 100%;
  }

}

尝试使用此媒体查询

尝试使用此媒体查询

尝试这样使用

@media (max-width:550px) {
.flex-images > div.item {
    display: block;
    width: 100% !important;
}
.flex-images > div.item img {
    width: 100%;
}
}

试着像这样使用

@media (max-width:550px) {
.flex-images > div.item {
    display: block;
    width: 100% !important;
}
.flex-images > div.item img {
    width: 100%;
}
}

---

谢谢你的工作，但是有一个高度问题。尝试将height:auto添加到div，但不起作用感谢它起作用，但存在高度问题。尝试将height:auto添加到div中，但没有成功。谢谢，但解决方案也存在高度问题。如果希望图像具有特定高度。然后，为父容器或

div

指定特定高度，即

.flex images>div.item

。因此，根据父图像的高度和宽度，图像将适合内部。感谢它的工作，但解决方案也存在高度问题。如果您希望图像具有特定高度。然后，为父容器或

div

指定特定高度，即

.flex images>div.item

。因此，根据父图像的高度和宽度，图像将适合内部。

@media (max-width:550px) {
.flex-images > div.item {
    display: block;
    width: 100% !important;
}
.flex-images > div.item img {
    width: 100%;
}
}