Ezequielcardoso 0 Denunciar post Postado Outubro 1, 2014 Saudações. Estou com uma situação de estética com meu site, referente ao ajuste de imagem com o tamanho da tela. Preciso saber se alguém sabe, como deixar de modo que ao diminuir o tamanho da janela do navegador, ou deixar o navegador em modo de janela. Fazer com que a o resultado do Script, se ajuste ao tamanho da página, Uma ves que.. quando eu deixo o navegador em modo de janela, as imagens continuam do mesmo tamanho,.... ou que gera uma falha no layout... visto que , as mesma, ficam passando da página... como se estivessem desordenada... exemplo: Suponhamos que na imagem a seguir... tenho o seguinte layout: aqui está em modo de navegador maximizado Agora: Em modo navegador janela: o resultado se mostra completamente diferente do esperando. Em modo de janela: exemplo: O script PHP que estou usando para mostrar o resultado é o seguinte : <?php include("conexao.php"); ?> <?php $selecao = "1";/* 1 para Destaque e 2 para outro tipo de produtos */ $sql = mysql_query("SELECT * FROM produtos_teste WHERE destaque=$selecao ORDER BY RAND() LIMIT 0,12 "); echo "<table width='100%' heigth='400px' border='0' cellspacing='8' cellpadding='8'>"; $conta_coluna = 1; while ($aux = mysql_fetch_array($sql)) { $url = $aux["linkprod"]; $destaque = $aux["destaque"]; $mostrar = "/emp_MostraProdLoja.php?secao=$destaque&codProduto="; $id = $aux["id_produto"]; $link = "<a href='$url$mostrar$id'>"; $fotos = "<img src=../fotos/"; $img = "btn_loja.jpg"; $flink = " alt='' border='0' p class='prod9'/></a>"; $flinkimg = " alt='' border='0' p class='prod9'/></a>"; $class = " <class='prodc'>"; if ($conta_coluna == 1) { echo "<tr>"; } echo "<td align='center' bgcolor='#ffffff' width='33%\' class='div_borda_cinza2'> $link $fotos" . $aux["thumbnail"] . $flink . "<p class='prod9'>". $aux["nome_produto"] . "<br><p class='prodpreco'>". $aux["preco"] ."<p class='prodcity'>". $aux["cidade"]."<p class='prod_adc'>" . $aux["adicionais"] . $link . $fotos . $img .$flinkimg ."</td>"; $conta_coluna++; if ($conta_coluna == 4) { echo "</tr>"; $conta_coluna = 1; } } echo "</table>"; mysql_free_result($sql); ?> Alguém sabe como resolver a questão do ajustamento do resultado da busca,,, que fique proporcional ao tamanho..? O que eu preciso: que ao diminuir a tela do navegador... as imagems do resultado da busca pelo script... também sejam diminuida.... assim se ajustando ao site. Att: Ezequiel Cardoso. Compartilhar este post Link para o post Compartilhar em outros sites
ESerra 744 Denunciar post Postado Outubro 1, 2014 Movendo para a área correta, CSS. Compartilhar este post Link para o post Compartilhar em outros sites
rikaschmitt 54 Denunciar post Postado Outubro 2, 2014 Uma alternativa, um pouco trabalhosa, é adicionar uma classe igual para essas imagens. Nisso, você cria várias @media queries para cada resolução da janela, e ajustando manualmente o tamanho das imagens. Exemplo: <img src="imagem.jpg" class="auto-size" /> No CSS faria assim: @media screen and (max-width: 1440px) { .auto-size { width:500px; height:auto; } } @media screen and (max-width: 1366px) { .auto-size { width:400px; height:auto; } } @media screen and (max-width: 1280px) { .auto-size { width:300px; height:auto; } } @media screen and (max-width: 10240px) { .auto-size { width:200px; height:auto; } } etc. Além disso, é preciso adicionar uma metatag no <head> do site para funcionar: <meta name="viewport" content="width=device-width"> Procure no Google mais informações sobre @media queries.. lhe ajudará. E claro que devem existir alguns plugins jQuery que façam um auto-ajuste... Compartilhar este post Link para o post Compartilhar em outros sites
Ezequielcardoso 0 Denunciar post Postado Outubro 2, 2014 Saudações: #rikaschmitt Obrigado irmão, Deu certo ! ! ! , agora a imagem se auto ajusta, conforme o desejado. Att: Ezequiel Cardoso. Compartilhar este post Link para o post Compartilhar em outros sites
