Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Tamanho das imagens proporcional ao tamanho da tela jQuery

02-06-2013 18:59

Esse script em jQuery ajusta as imagens do documento de acordo com o tamanho da janela, mesmo se o usuário reduzir o tamanho da janela.

* Esse é só uma base, a proporção da imagem pode apresentar diferença em relação ao tamanho real.

<script src="jquery.js"></script>   <script> $(document).ready(function() {   $("img").each(function(i) { var h = $(document).height()/2; var w = $(document).width()/2; $(this).css({ height: h, width: w }); });   $(window).resize(function() { $("img").each(function(i) { var h = $(document).height()/2; var w = $(document).width()/2; $(this).css({ height: h, width: w }); }); });   }); </script>


<img src="http://www.baixaki.com.br/imagens/wpapers/BXK28191_malocadocaboclodsc00019-800-x-600-800.jpg">

0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Tamanho das imagens proporcional ao tamanho da tela jQuery

02-06-2013 19:15

Nesse exemplo, o tamanho da imagem fica proporcional em relação ao tamanho da janela.

<!DOCTYPE html> <html> <head>         <meta charset="utf-8" />         <title>Responsive Images Test Page</title>         <script>                 /*                 //optional: set config options here!                 var rwd_images = {                         widthBreakPoint: 600                 };                 */         </script>         <script src="responsiveimgs.js"></script>         <!-- demo styles -->         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <style>                 body { font-family: Helvetica, sans-serif; background: #222; color: #eee; margin: 20px auto; padding: 0 20px; max-width:   980px; }                 img { border: 0; width: 100%; display: block; max-width: 100%; }                 #cred { font-size: .7em; color: #aaa; }                 a { color: #fff; }         </style> </head> <body>           <h1>Responsive Images Test Page</h1>         <p>In supported browsers, the following image will load either small or large version depending on screen resolution, making a   single 1kb request before requesting the appropriate size.</p>           <img src="http://www.baixaki.com.br/imagens/wpapers/BXK28191_malocadocaboclodsc00019-800-x-600-800.jpg" />           <p id="cred"><strong>Photo credit (CC):</strong> Cia de Foto <a   href="http://www.flickr.com/photos/ciadefoto/3192757134/in/pool-809956@N25/">Flickr Creative Commons</a></p>   </body> </html>

Fonte: https://github.com/filamentgroup/Responsive-Images
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1309
Sexo: Masculino

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

13-03-2016 18:02

Não está dando certo este segundo exemplo. Eu baixei o arquivo responsiveimgs.js e inseri na pasta do arquivo de teste.

O arquivo desta linha parece inexistir: http://www.baixaki.com.br/imagens/wpape ... 00-800.jpg.

Troquei-o por http://www.flickr.com/photos/ciadefoto/3192757134 (inserindo essa linha no navegador é exibida a imagem de uma criança correndo na praia).

Mas não é exibida a imagem dentro do arquivo de teste.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

13-03-2016 18:14

A imagem do link não existe mais.

O link que você usou não funciona, porque tem que ser o link da imagem direto "jpg, gif, etc".
No caso a imagem do link que você postou seria http://c2.staticflickr.com/4/3399/31927 ... z.jpg?zz=1

Peguei uma outra imagem de exemplo da net mesmo. Testa o código abaixo

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Responsive Images Test Page</title> <script> /* //optional: set config options here! var rwd_images = { widthBreakPoint: 600 }; */ </script> <script src="responsiveimgs.js"></script> <!-- demo styles --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Helvetica, sans-serif; background: #222; color: #eee; margin: 20px auto; padding: 0 20px; max-width: 980px; } img { border: 0; width: 100%; display: block; max-width: 100%; } #cred { font-size: .7em; color: #aaa; } a { color: #fff; } </style> </head> <body> <h1>Responsive Images Test Page</h1> <p>In supported browsers, the following image will load either small or large version depending on screen resolution, making a single 1kb request before requesting the appropriate size.</p> <img src="http://www.tjleco.com.br/wp-content/uploads/2014/11/fachada-casa-simples.jpg" /> <p id="cred"><strong>Photo credit (CC):</strong> Cia de Foto <a href="http://www.flickr.com/photos/ciadefoto/3192757134/in/pool-809956@N25/">Flickr Creative Commons</a></p> </body> </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1309
Sexo: Masculino

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

14-03-2016 12:37

Muito bom! Funcionou perfeitamente. Testei, on-line, no servidor remoto, acessando pelo notebook e pelo smartphone, com tela de 5 polegadas. Por estes dias, eu acessei um site que testa os sites para dispositivos móveis em diversos tamanhos de telas de tais dispositivos, simulando tais telas. Procurei, há pouco, o link nos favoritos do navegador, mas não o encontrei. Mas o código é bastante interessante, e era do que eu precisava. Obrigado.
1
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

14-03-2016 14:10

Tem esse site onde você pode escolher o dispositivo http://mobiletest.me
Tem esse também http://www.mobilephoneemulator.com
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1309
Sexo: Masculino

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

14-03-2016 14:45

Obrigado. Vou testar o código neles.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1309
Sexo: Masculino

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

15-03-2016 12:47

Há alguma ideia de como se fazer colunas numa paginação de resultados em design responsivo, mas "na unha"? Exibindo-se os resultados da consulta do banco de dados em mais de uma coluna se houver registros para mais de uma coluna, até 3 ou quatro colunas, por exemplo? Andei pesquisando na web, li a respeito de grids (leitura superficial a respeito disso, apenas sabendo que existem), frameworks como Bootstrap, essas coisas. Mas eu gostaria de aprender a fazer sem esses instrumentos.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

15-03-2016 13:43

Não sei como fazer na unha, mas tem esse site que já gera as colunas http://www.responsivegridsystem.com/calculator/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1309
Sexo: Masculino

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

15-03-2016 15:43

Obrigado. Eu gerei 4 colunas pelo site que você sugeriu. Copiei o código, colei num arquivo, upei para o servidor remoto. Sem viewport, na orientação retrato e paisagem, exibiam 4 colunas. Eu inseri no código o viewport de seu exemplo original deste post. Na orientação retrato, ficou uma coluna sobre a outra, e, na orientação paisagem, ficaram as 4 colunas lado a lado.

Fiz o download dos arquivos do site que você sugeriu, e os upei, acessando uma página de exemplo que mostra colunas a partir de 2 até 12. Na orientação retrato, todas ficaram uma sobre a outra, e, na orientação paisagem, foi sendo exibida a quantidade informada, lado a lado. Numa linha, 2, lado a lado; na segunda linha, 3, lado a lado; e assim por diante, até chegar a 12.

Fiz o teste no site http://mobiletest.me, em todos os dispositivos em orientação retrato, e todos apresentaram a situação de as colunas se sobreporem às outras, exceto os tablets.

É melhor eu me contentar com somente uma coluna na orientação retrato?

Eu gostaria de, ao menos, duas.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

15-03-2016 15:50

Geralmente em celulares é melhor as divs no formato de coluna, uma div abaixo da outra. É até melhor para leitura e para se adequar a vários tipos de celulares.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1309
Sexo: Masculino

Re: Tamanho das imagens proporcional ao tamanho da tela jQuery

15-03-2016 16:18

Sim. Estou pensando em fazer como você disse. Se, mais adiante, eu conseguir fazer diferente, postarei aqui. Obrigado pela força.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado