cancelar
Mostrando los resultados de 
Buscar en lugar de 
Quiere decir: 

AYUDA! Agrandar una imagen por codigo.

Gustavo_Chile
Nuevo miembro
4 0 0

Hola, buenas!
Necesito ayuda para encontrar en el código el lugar donde cambiar el tamaño de una imagen de mi tienda, pero es solo una imagen en especifico.
Actualmente tengo el tema Venture y en este tema se puede colocar en el Home una sección que se llama "producto destacado", esa es la imagen que me gustaría agrandar porque se ve demasiado grande el texto y la imagen proporcionalmente muy pequeña. Debería ser aprox. como la imagen de la derecha. (adjunto pantallazo)

Captura de Pantalla 2020-11-28 a la(s) 19.02.14.png

 

 

 

 

 

 

 

¿Alguien me podría decir como soluciono esto?
Muchas Gracias.

0 Me gusta
MikeDev
Curioso(a)
6 0 0

Hola yo puedo ayudarte pero necesito ver como está puesto el código, puedes o hacer una captura de pantalla despues de haber hecho inspeccionar elemento sobre la imagen para ver como esta construido, o más fácil enviame el link de tu página web y lo miro yo mismo.

0 Me gusta
Gustavo_Chile
Nuevo miembro
4 0 0

Hola MikeDev, gracias por contestar.

Intente hacerlo con "inspeccionar elemento" pero la verdad como no soy experto no logre encontrar la barra de código correcta.
Te dejo el link de mi sitio, la imagen de "producto destacado" que quiero agrandar está al final del sitio en el home.

www.camilazapatos.cl

Quedo atento,
Muchas gracias por tu ayuda.

0 Me gusta
MikeDev
Curioso(a)
6 0 0

Una solución rápida es esta:

 

b626f6c29f08f238a540a4715e4ff9bc

Para efectuar el cambio correctamente deberias ir a -Editar Código -> Ir a la carpeta Assets y aqui hay dos formas de hacerlo:

Forma correcta:

Buscar en el archivo theme.scss (usa el comando control+F para buscar la palabra dentro del archivo) la palabra        .product__photo-wrapper img   y debes añadirle esto:

scale: 1.4;                */ puedes cambiar el valor del scale 1 seria el tamaño que tienes ahora y 2 por ejemplo seria el soble de tamaño, 1.5 seria hacerlo un 50% mas grande */
overflow: hidden;

 

Este seria el resultado final:

 

.product__photo-wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
scale: 1.4;
overflow: hidden;
}

 

 

El otro modo no el mas correcto pero si mas fácil seria pegar simplemente esto al final del código del archivo theme.scss o app.css

 

.product__photo-wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
scale: 1.4 !important;
overflow: hidden !important;
}

 

 

El resultado final no es el mejor que se pueda esperar, pero para hacerlo mejor necesitaria el codigo original ya que no esta limitado solo en estilo css, si no que el html esta forzando el tamaño de la imagen.

 

Espero haberte servido de ayuda, siento no haber podido contestar antes, por desgracia no estoy muy activo en el foro, puedes contactar conmigo a traves de este correo electrónico:

 marketshopping2020@gmail.com
0 Me gusta