Estoy usando el complemento jquery de FlexImages para la cuadrícula justificada. Funciona muy bien. El único problema que tengo es que quiero que las imágenes tengan un ancho del 100% en el dispositivo móvil (puerto de vista de 550 px o menos)
Complemento jQuery Fleximage: https://goodies.pixabay.com/jquery/flex-images/demo.html
Código:
<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});
Creé un jsfiddle y puedes verlo desde el enlace de abajo
https://jsfiddle.net/1kgs3soc/
Intento agregar el CSS a continuación, pero no tuve suerte.
@media (max-width:550px) {
.flex-images > div.item {
display: block;
width: 100%;
}
}
Probé todos los trucos de CSS que se me ocurren, pero nada ayudó. ¿Alguien puede indicarme cómo hacer esto?
Saludos
@media only screen and (max-width: 550px) {
.flex-images .item {
width: 100% !important;
}
.flex-images .item img {
width: 100%;
}
}
intente usar esta consulta de medios
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras