Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

EvelRyu

Limitar tamanho de imagens

Por , em Desenvolvimento frontend

Recommended Posts

EvelRyu    0

EvelRyu
Postado

Oi pessoal, tudo jóia?Eu precisava saber se tem como especificar um limite de largura para todas as imagens do site, vou explicar o porque.O meu site tem uma area livre pra postar fotos de 700px, eu não quero que quando os outros usuários colocarem fotos maiores que esta medida elas extrapolem o template do site.Eu queria saber se por css, javascript ou de qualquer outro modo eu possa limitar 700px como tamanho máximo para todas as imagens. e que sejam ajustadas automaticamente para não ultrapassar essa medida.Fico no aguardo, t+ pessoal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

robson_macedo    0

robson_macedo
Postado

Fala beleza?

bom se foi o que entendi, segue o codigo aê...

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title></head><style type="text/css">.estiloIMG {width: 700px;}</style><body><img src="264140_5836.jpg" width="1245" height="1224" class="estiloIMG"></body></html>

OBS: você poderia ter padronizado todas as imagens usando só "img" mas iria, bagunçar seu layout todo, entao nas imagens que você quer esse tamanho 700px você coloca class="estiloIMG" como mostra acima valeu.

 

abraço http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

EvelRyu    0

EvelRyu
Postado

Só mais uma dúvida, esse código não faria com que as imagens menores que 700px também se ajustassem a essa medida?Eu queria que essa regra valesse apenas para as que ultrapassasem 700px de largura.é posssível?

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

É possivel usando javascript

 

<body onload="javascript:redimensionaImagens();">

function redimensionaImagens(){        elem = document.getElementsByTagName("IMG");        for(i=0;i<elem.length;i++){              if (elem[i].offsetWidth > 700){                   elem[i].style.height = Math.round(elem[i].offsetHeight * (700 / elem[i].offsetWidth));                   elem[i].style.width = 700;              }        }}

Eu coloquei esse calculo da altura caso alguma imagem esteja com a height fixa... senão vai deformar a imagem

Nem testei, se der erro avisa!! :D

falou...

Compartilhar este post

Link para o post
Compartilhar em outros sites

EvelRyu    0

EvelRyu
Postado

Cara funcionou perfeitamente, mas tive um probleminha, a regra acabou se aplicando também ao cabeçalho do meu site.

 

Da uma olhada: http://www.sedentario.org/colirios/

 

Tem como excluir a imagem do cabeçalho da regra do script? Ou fazer que o script se aplique apenas para um "div"?

 

Outra coisa que eu pude perceber é que as imagens só redimensionam depois de carregadas completamente, mas isso é o de menos, resolvendo o problema do cabeçalho já tá ótimo.

 

valeu, brigadão eim gente! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

experimenta colocar a img do cabeçalho num backgound dentro da div do cabeçalho... ;) naum consegui ver o site... :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

EvelRyu    0

EvelRyu
Postado

Não dá pra colocar a imagem do topo em uma div, pois a mesma é gerada automaticamente por um outro código java que carrega topos aleatórios. (que inclusive foi aqui que me ensinaram a fazer). :P Será que não tem como fazer isso no próprio código?

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado 

function redimensionaImagens(){       elem = document.getElementsByTagName("IMG");       for(i=0;i<elem.length;i++){             if (elem[i].offsetWidth > 700) && (elem[i].id != "ID DA IMAGEM DO CABECALHO") {                  elem[i].style.height = Math.round(elem[i].offsetHeight * (700 / elem[i].offsetWidth));                  elem[i].style.width = 700;             }       }}

joga uma ID na imagem do cabeçalho e coloca esse mesmo id no script

 

o porque dela redimensionar as imagens só qdo a página terminar de carregar é o evento ONLOAD... ele só é executado qdo a página completa o carregamento...

Compartilhar este post

Link para o post
Compartilhar em outros sites

EvelRyu    0

EvelRyu
Postado

É o seguinte o cabeçalho da minha página é gerado por este código:

 

<script LANGUAGE="JavaScript">var theImages = new Array()theImages[0] = '/colirios/wp-content/themes/colirios/images/top.jpg'theImages[2] = '/colirios/wp-content/themes/colirios/images/top2.jpg'theImages[3] = '/colirios/wp-content/themes/colirios/images/top3.jpg'//Acrescente aqui quantas imagens quiservar j = 0var p = theImages.length;var preBuffer = new Array()for (i = 0; i < p; i++){preBuffer[i] = new Image()preBuffer[i].src = theImages[i]}var whichImage = Math.round(Math.random()*(p-1));function showImage(){document.write('<img src="'+theImages[whichImage]+'">');}</script>

Esse código inclusive foi me passado aqui no forum uma vez passada... ele serve para que o cabeçalho seja carregado aleatóriamente.

 

Neste caso eu não sei se teria como colocar id nas imagens, Teria?

 

Se eu remover o evendo "onload" as imagens irão redimensionar antes da página carregar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado 

function showImage(){document.write('<img id="imgCabecalho" src="'+theImages[whichImage]+'">');}

dai no script, coloca imgCabecalho

 

o problema da demora pra redimensionar as imagens pode melhorar se você tirar aquele trecho onload="javascript... " e colocar no final do seu html...

 

 

mais ou menos assim:

 

<!-- Seu HTML ... você joga o javascript bem no finzinho, antes do </body> ......  mas tira o onload!! --><script type="text/javascript">redimensionaImagens();</script></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

EvelRyu    0

EvelRyu
Postado

Eu tentei aqui, mas quando eu coloco o código com a parte do ID ele para de funcionar para todas as imagens:

 

&& (elem[i].id != "imgCabecalho")

É nessa parte que parece estar o problema... quanto ela está presente no código o mesmo não funciona, se eu tiro tudo beleza, mas o cabeçalho....

 

Se quiser ver como está ficando acesse: http://www.sedentario.org/colirios/

 

Eu sei que já to enchendo, mas vê ai pessoal... :P http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

cara, tenta com parenteses entra todo o IF

 

function redimensionaImagens(){      elem = document.getElementsByTagName("IMG");      for(i=0;i<elem.length;i++){            if ((elem[i].offsetWidth > 700) && (elem[i].id != "ID DA IMAGEM DO CABECALHO")) {                 elem[i].style.height = Math.round(elem[i].offsetHeight * (700 / elem[i].offsetWidth));                 elem[i].style.width = 700;            }      }}

 

Entendeu aonde jogar a chamada do script???

tira do body onload e joga lá no final o :

 

<script type="text/javascript">redimensionaImagens();</script></body></html>

 

Nem ta enchendo, cara, fica frio q to tentando ajudar.. :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

Ahhh e você tem q trocar o ID na função!!!

 

function redimensionaImagens(){     elem = document.getElementsByTagName("IMG");     for(i=0;i<elem.length;i++){           if ((elem[i].offsetWidth > 700) && (elem[i].id != "imgCabecalho")) {                elem[i].style.height = Math.round(elem[i].offsetHeight * (700 / elem[i].offsetWidth));                elem[i].style.width = 700;           }     }}

Compartilhar este post

Link para o post
Compartilhar em outros sites

EvelRyu    0

EvelRyu
Postado

E aew pessoal, tiveram um bom fim de semana http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

Valeu gente agora está funcionando, acho que o negócio estava nos parenteses mesmo.

 

A unica coisa que não resolveu mesmo foi o fato das imagens só redimensionarem depois da página carregada completamente, mesmo com aquela alretação com a colocação do script no final da página...

 

mas já tá de boa assim.

 

no final o código ficou assim:

 

<script LANGUAGE="JavaScript">var theImages = new Array()theImages[0] = '/colirios/wp-content/themes/colirios/images/top.jpg'//Acrescente aqui quantas imagens quiservar j = 0var p = theImages.length;var preBuffer = new Array()for (i = 0; i < p; i++){preBuffer[i] = new Image()preBuffer[i].src = theImages[i]}var whichImage = Math.round(Math.random()*(p-1));function showImage(){document.write('<img id="cabecalho" src="'+theImages[whichImage]+'">');}
<body onload="javascript:redimensionaImagens();"><script LANGUAGE="JavaScript">function redimensionaImagens(){    elem = document.getElementsByTagName("IMG");    for(i=0;i<elem.length;i++){          if ((elem[i].offsetWidth > 700) && (elem[i].id != "cabecalho")) {               elem[i].style.height = Math.round(elem[i].offsetHeight * (700 / elem[i].offsetWidth));               elem[i].style.width = 700;          }    }}</script>

Mas é claro que se alguém tiver mais alguma idéia será bem vinda http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Brigadão pessoal, vcs são D+ http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito