olá @fabiola123,
o problema não é sua imagem, não adianta mandar imagens de alta resolução nesse caso. o problema é que seu tema está pegando uma imagem gerada no WordPress de 250px de largura (width) e colocando dentro de uma box de mais de 500px. ai como acontece com toda imagem “esticada”, ela fica pixelada.
pelo design do seu tema, eu acho que é esse abaixo,
https://br.wordpress.org/themes/vw-book-store/
se for, seu tema tem um código bem antigo, ainda com código para IE7 no head… está na versão 0.1, com apenas 300 instalações e nenhum tópico aberto no fórum.
bem, se você quiser continuar com esse tema, precisa ver se em Aparência > Personalizar há alguma aba que permita configurar o tamanho da imagem na página do produto, pelo menos para 600px.
quem sabe o @cbrandt ve aqui seu tópico e vê algo no CSS que possa ajudar. porque nesse caso, acho que o código de seu tema não ajuda…
acho inclusive que a melhor solução seria procurar um tema mais moderno…
felicidades e boa sorte,
CB
(@cbrandt)
Olá @fabiola123, @ralden,
Não uso o Woocommerce, mas suspeito que haja algum plugin bom no repositório que faça a gestão dos tamanhos de imagens, gerando vários tamanhos para uso em diferentes telas. Muitas vezes isso é feito pelo próprio tema, como o que uso no meu site, por isso não sei de nenhum plugin para recomendar. Mas pra isso o tema precisa ser “responsivo”.
Em termos de CSS, o que pode remediar essa esticada seria inserir um código no custom.css (ou equivalente) que substitua o “width:100%”, deixando a imagem exibida em seu tamanho natural (250×250). Vai sobrar uma margem branca entre a imagem e o texto. Teria que fazer testes e ver se agrada:
div.product div.images img, #content div.product div.images img {
width: auto;
}
Deu certinho CB (@cbrandt). Agradeço também Ralden Souza (@ralden).
Implementei o código que me passou na personalização do meu tema em CSS adicional com o seguinte código:
div.product div.images img, #content div.product div.images img {
width:auto;
margin-top:30px;
margin-bottom:30px;
margin-left:130px;
}
Resultado final
CB
(@cbrandt)
Bom saber que deu certo, @fabiola123!
Depois não esquece de marcar este tópico como resolvido.
