Question

我正在为Justified网格使用FlexImages jquery插件。它很棒。我只有问题是我希望手机上的图像宽度为100％（查看端口550px或更小）

jQuery Fleximage插件：https://goodies.pixabay.com/jquery/flex-images/demo.html

代码：

<div style="max-width:908px;margin:auto;padding:0 10px 10px">
    <div id="demo1" class="flex-images">
        <div class="item" data-w="219" data-h="180"><img src="http://placehold.it/219x180.jpg"></div>
        <div class="item" data-w="279" data-h="180"><img src="http://placehold.it/279x180.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div>
        <div class="item" data-w="147" data-h="180"><img src="http://placehold.it/147x180.jpg"></div>
        <div class="item" data-w="276" data-h="180"><img src="http://placehold.it/276x180.jpg"></div>
        <div class="item" data-w="319" data-h="180"><img src="http://placehold.it/319x180.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div>
        <div class="item" data-w="290" data-h="180"><img src="http://placehold.it/290x180.jpg"></div>
        <div class="item" data-w="305" data-h="180"><img src="http://placehold.it/305x180.jpg"></div>
        <div class="item" data-w="240" data-h="180"><img src="http://placehold.it/240x180.jpg"></div>
        <div class="item" data-w="270" data-h="180"><img src="http://placehold.it/270x180.jpg"></div>
        <div class="item" data-w="283" data-h="180"><img src="http://placehold.it/283x180.jpg"></div>
        <div class="item" data-w="271" data-h="180"><img src="http://placehold.it/271x180.jpg"></div>
        <div class="item" data-w="258" data-h="180"><img src="http://placehold.it/258x180.jpg"></div>
    </div>
</div>

的JavaScript

$('#demo1').flexImages({rowHeight: 160});

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

https://jsfiddle.net/1kgs3soc/

我尝试添加以下css但没有运气。

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

我尝试了所有我能想到的css技巧，但没有任何帮助。谁能指出我怎么做？

此致

Answer 1

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

}

尝试使用此媒体查询

Answer 2

尝试使用这样的，

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

FlexImages在移动设备上对齐网格图像大小

2 个答案: