Como podemos ajudar?

FC 8763 :: Como padronizar a largura das imagens de produtos?

É possível exibir as imagens de todos os produtos com larguras iguais para cada tipo de imagem.

Para isto, adicione as seguintes classes no arquivo LojaSite.css que fica na pasta htm da loja:

/* ESTILOS PARA AS FOTOS DE PRODUTOS */
#ProdCapaDiv .EstImgFC{width:100}/* TAMANHO DAS IMAGENS NA CAPA */
#ProdListaDiv .EstImgFC{width:100}/* TAMANHO DAS IMAGENS PRINCIPAIS */
#ProdDetDiv .EstImgFC{width:200}/* TAMANHO DAS IMAGENS DE DETALHE */
#ProdAmpDiv .EstImgFC{width:400}/* TAMANHO DAS IMAGENS AMPLIADAS */

No código acima, altere os trechos que estão em vermelho para a largura em pixels que deseja mostrar as imagens.

Em seguida, altere as tags <ImagemProd> do arquivo EstiloProduto.htm da seguinte maneira:

1. Para a tag <ImagemProd> que fica entre <ProdLista> e </ProdLista>:
   <div id="ProdListaDiv"><ImagemProd></div>

2. Para a tag <ImagemProd> que fica entre <ProdDet> e </ProdDet>:
   <div id="ProdDetDiv"><ImagemProd></div>
   

3. Para a tag <ImagemProd> que fica entre <ProdAmp> e </ProdAmp>:
   <div id="ProdAmpDiv"><ImagemProd></div>
   

Obs¹: A altura de cada imagem será automaticamente determinada de forma proporcional à largura padronizada, para que não fique distorcida (esticada ou achatada).

Obs²: Não sugerimos que as fotos dos produtos sejam redimensionadas via CSS. O correto é que as fotos originais dos produtos tenham a sua largura e altura proporcionais. Diversos portais de comparação de preços e shoppings virtuais exibem as fotos dos produtos no tamanho 100x100 pixels. Caso a foto do produto da loja tenha suas dimensões 120x30 por exemplo, esta foto será exibida de forma distorcida nestes portais, prejudicando a conversão de clicks no produto.

Obs³: Nunca utilize flash para a foto principal do produto.