Soporte » Diseño – Temas y plantillas » Ajustar imagen producto

  • Resuelto azulejosonlineelchollo

    (@azulejosonlineelchollo)


    Hola,

    tengo un problema con las dimensiones en las que aparece la imagen de un producto en la tienda.

    Si subo una imagen que no son de dimensiones cuadradas (mas ancha que alta), al aparecer en la tienda la imagen se ajusta a la altura. Adjunto link: https://azulejosonlineelchollo.com/categoria-producto/revestimiento/pasta-blanca/inspired/

    Para que aparezca cuadrada lo que hago es editarla y ponerle unas altura similar a la anchura que tiene (Relación 1:1). Para que esos pixeles extra que le pongo de alto no aparezcan en blanco sino transparentes, cambio el formato de la imagen de JPG a PNG. Haciendo esto consigo que se vea en la tienda la imagen de forma cuadrada. Adjunto link: https://azulejosonlineelchollo.com/categoria-producto/maderas/pasta-roja-maderas/rainforest/

    El problema de hacer esto último es que las imágenes PNG ocupan alrededor de 10 veces más de memoria que las JPG. Si no hago esto y pongo que se vean respetando la relación 1:1, lo que hace es recortarla (Hace zoom hasta conseguir una relación 1:1) y se pierde calidad.

    ¿Hay alguna forma de que las imágenes se vean como en el segundo link pero sin tener que pasarlas a PNG y modificar la altura de la imagen?

    Gracias,

    saludos

    Luis

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Iniciador del debate azulejosonlineelchollo

    (@azulejosonlineelchollo)

    Necesito que se vean como en el segundo link porque sino se descuadra con la segunda imagen que aparece al pasar el ratón por encima de la imagen y tapa la descripción del producto.

    saludos

    Moderador Jose Luis

    (@jose64)

    Hola.

    Si el fondo de la página principal es blanco ¿por qué no le pones fondo blanco a la imagen?. Edita las imágenes, llévalas a la relación de aspecto que te interesa y ponle los marcos de relleno superior e inferior en blanco, expórtalas como jpg y resuelves el problema. O mejor aún edítalas y ajústalas al tamaño final con el fondo que prefieras, blanco como el fondo de página o un color neutro.

    Las opciones que te podrían servir usando CSS se te van a aplicar a todas las imágenes, si cuadras unas descuadras las otras, esa es la razón por la que para los productos se deben usar siempre imágenes con la misma relación de aspecto.

    Coméntanos si tienes alguna duda y, por favor, recuerda marcar el debate como resuelto cuando así lo consideres, de esta forma nos ayudas a mantener el foro al día.

    Iniciador del debate azulejosonlineelchollo

    (@azulejosonlineelchollo)

    Hola,

    gracias por contestar. Como bien comentas una opción es poner el fondo blanco y dejarlo en JPG. El problema de esto es que en algunos smartphones el fondo puede ser negro de forma que se verían las partes blancas de las imágenes. Es por esto por lo que lo paso a PNG y lo hago transparente.

    ¿Existe algún código CSS? Si existiera podría probar y ver de entre todas las opciones que tengo cual puede ser la óptima.

    Lo ideal sería definirle el espacio que quiero que ocupe la imagen en mi página web y que ella se ajustara a ese formato sin que se recortara y centrándose en el espacio definido.

    Muchas gracias,

    saludos

    Moderador Jose Luis

    (@jose64)

    El problema es que siempre se va a recortar y al ser imágenes con diferentes tamaños no queda bien, ya hice la prueba. De todas formas te dejo el código que debes añadir al CSS adicional:

    .woocommerce ul.products li.product a img {
        height: 300px;
    }

    Con respecto al fondo en móvil puedes modificarlo y, aparte de eso, puedes usar la opción de usar un color neutro.

    Iniciador del debate azulejosonlineelchollo

    (@azulejosonlineelchollo)

    Hola,

    muchas gracias por tus recomendaciones y por el código, seguro que me sirve para tomar una decisión,

    muchas gracias, marco el debate como resuelto,

    saludos

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Debes estar registrado para responder a este debate.