CSS - CSS para miniaturas

Buenos dias
tengo una pagina web y estoy un poco desesperado porque intento hacer que todas las miniaturas de los productos de mi pagina se muestren en 300x300 totalmente cuadrados y si bien expuestos y no hay manera, ni con plugins.. Seria posible tener un código CSS que fuerce a que todos las miniaturas se muestren en ese tamaño en los productos de woocomerce?

Gracias de antemano por su inestimable ayuda

Hola,

con css es muy fácil, lo único que debes tener en cuenta es que la imagen seguirá teniendo su peso original en MB, aunque se muestre a 300x300 píxels.

Si pesan mucho y son muchas imágenes producirá una carga lenta de la página y un retardo molesto al usuario.

Debes aplicar la siguiente clase css a cada imagen:


Lo de quitar el borde es opcional, pero algunos navegadores lo muestran por defecto.

Esta clase mostrará las imágenes una al lado de la otra hasta el final de su contenedor e irá añadiendo filas, con un pequeño espacio entre ellas.

O también puedes aplicar la clase directamente al contenedor cambiando el nombre de la clase por .miniaturas > img

Un saludo!

Muchísimas gracias y esto es para las miniaturas de woocommerce entiendo no ?

Hola,

esto es una clase css que se puede aplicar a elementos HTML como una imagen <img> o un contenedor de imágenes <div>.
woocommerce es toda una aplicación de comercio electrónico, si no entiendes mucho de HTML y CSS te recomiendo que primero estudies un mínimo de conceptos básicos:

https://developer.mozilla.org/es/docs/Web/HTML
https://developer.mozilla.org/es/docs/Web/CSS

Un saludo!

Buenas, he puesto el código y no funciona, será porque tiene que ser especifico para las miniaturas de woocommerce para que funcione no ?

Saludos,

recuerda todas las indicaciones de Ivan. Si entiendes los conceptos, podrás adaptar/cambiar cualquier estructura HTML con CSS.

Es posible, que el nombre de la clase del ejemplo, lo tengas que cambiar por el de las miniaturas y/o el contenedor de Woocommerce. El código, puede valer para probar y ajustar hasta dejarlo a tus necesidades.

P.D.: Si las imágenes no son cuadradas, se deformarán al forzar el ancho y el largo.

Espero sea útil.

es sencillo mira mi ultimo video como lo hago


https://youtu.be/MZryOJ8ubPc