FlexImages Tamaño de imagen de cuadrícula justificado en el móvil

Jordyn

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

GvM
@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

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Imagen para ajustar el tamaño de celda de la cuadrícula en WPF

Material-UI: la cuadrícula receptiva no cambia de tamaño en el ancho del móvil

Cuadrícula Vaadin 8: ¿Tamaño de la imagen en la celda de la cuadrícula?

Figcaption único cambia el tamaño de la imagen en el diseño de la cuadrícula

Cambiar el diseño de Bootstrap de formulario en línea a cuadrícula en el dispositivo móvil

Cambiar el diseño de Bootstrap de formulario en línea a cuadrícula en el dispositivo móvil

Tamaño de imagen de fondo incorrecto / diferente en el dispositivo móvil

La cuadrícula de Bootstrap se rompe en el tamaño más pequeño

Cómo cambiar el tamaño de una imagen a una cuadrícula css

El elemento de la cuadrícula se contrae en un tamaño de pantalla más pequeño

El elemento de la cuadrícula se contrae en un tamaño de pantalla más pequeño

** [Resuelto] ** El tamaño de la imagen se estropea cuando se ejecuta el sitio web en un dispositivo móvil

Imagen de lienzo de diferente tamaño en píxeles desde el escritorio al dispositivo móvil

¿Cómo cambiar el tamaño de la imagen de fondo fija en la vista móvil?

Cómo mostrar la imagen mientras se minimiza el tamaño de la ventana en la vista móvil

Problema de compatibilidad al cambiar el tamaño de una imagen dentro del diseño de cuadrícula css

Cambiar el tamaño de imageViews en un diseño de cuadrícula

Cambiar el tamaño de imageViews en un diseño de cuadrícula

Organización de tamaño de columna variable en el sistema de cuadrícula

Imagen de carga XAML en cuadrícula

La imagen dentro de la cuadrícula extiende el tamaño del elemento de la cuadrícula de manera desproporcionada a otros

Cambie el tamaño de la cuadrícula para que coincida con el tamaño de los cuadros en la cuadrícula

¿Cómo configuro el tamaño de celda de la cuadrícula en Storybook 5?

Xamarin Forms cambiar el tamaño de la animación de cuadrícula en MVVM

¿Cómo puedo mantener la imagen de fondo estirada al panel de cuadrícula al cambiar el tamaño?

Maximice el tamaño de las miniaturas en una cuadrícula

¿Cómo ajusto el tamaño de CarouselView en la cuadrícula?

Cambiar el tamaño del elemento de cuadrícula enfocado en UWP C #

Cómo evitar que Canvas afecte el tamaño de la cuadrícula en UWP

TOP Lista

CalienteEtiquetas

Archivo