Publicado em 3 de mar.

[Resolvido] Imagem em porcentagem

Gente eu vi nesse site EXEMPLO , a imagem principal logo de entrada. Pois então, ela é redimensionada conforme a resolução do usuário ou em porcentagem, como se faz isso, é algum script ou no proprio CSS tem algum tutorial disso ?

valeu.. :D

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Evandro Oliveira· 3 de mar.

<script type="text/javascript">
	var galleryjson = [{"id":"439","descript":"<p>Neri Oxman<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8125__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8125__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8125__h1200-.jpg","w":1146,"h":900,"typ":"image","url":false},{"id":"438","descript":"<p>Commonwealth<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8124__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8124__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8124__h1200-.jpg","w":1146,"h":900,"typ":"image","url":false},{"id":"494","descript":"<p>Anna<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11302__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11302__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11302__h1200-.jpg","w":1146,"h":900,"typ":"image","url":false},{"id":"334","descript":"<p>Christopher<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/6699__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/6699__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/6699__h1200-.jpg","w":1146,"h":900,"typ":"image","url":false},{"id":"499","descript":"<p>Justin<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11307__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11307__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11307__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"465","descript":"<p>Hugh Herr<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/9169__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/9169__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/9169__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"500","descript":"<p>Heloise<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11308__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11308__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11308__h1200-.jpg","w":1151,"h":900,"typ":"image","url":false},{"id":"502","descript":"<p>Marc Schiller<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11310__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11310__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11310__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"497","descript":"<p>Jen<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11305__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11305__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11305__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"420","descript":"<p>Kristen Schaal<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8062__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8062__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8062__h1200-.jpg","w":1151,"h":900,"typ":"image","url":false},{"id":"495","descript":"<p>Carl<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11303__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11303__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11303__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"434","descript":"<p>Merkley???<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8120__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8120__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8120__h1200-.jpg","w":1146,"h":900,"typ":"image","url":false},{"id":"337","descript":"<p>Dreama Walker<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/6712__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/6712__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/6712__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"296","descript":"<p>Julia<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/4549__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/4549__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/4549__h1200-.jpg","w":1146,"h":900,"typ":"image","url":false},{"id":"542","descript":"<p>Jake Hurwitz<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11773__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11773__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11773__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"424","descript":"<p>Katherine<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8066__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8066__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8066__h1200-.jpg","w":1146,"h":900,"typ":"image","url":false},{"id":"507","descript":"<p>Maulik Pancholy<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11315__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11315__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11315__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"504","descript":"<p>Richard Artschwager<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11312__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11312__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11312__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"561","descript":"<p>Sam Reich<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/13165__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/13165__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/13165__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"496","descript":"<p>Cecilia Méndez<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11304__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11304__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11304__h1200-.jpg","w":1151,"h":900,"typ":"image","url":false},{"id":"506","descript":"<p>Stephen Burks<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11314__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11314__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11314__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"498","descript":"<p>Kiley<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11306__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11306__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11306__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"501","descript":"<p>Rafael Viñoly<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11309__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11309__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11309__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"503","descript":"<p>Skylar<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11311__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11311__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11311__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"505","descript":"<p>Patrick<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11313__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11313__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/11313__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false},{"id":"419","descript":"<p>Jake Lodwick<\/p>","thumb":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8061__h190-.jpg","small":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8061__h900-.jpg","large":"http:\/\/www.noahkalina.com\/web\/assets\/images\/8061__h1200-.jpg","w":1156,"h":900,"typ":"image","url":false}];
</script>

note as propriedades W e H, referenciando Width e Height, largura e altura respectivamente

williamot· 3 de mar.

Não entendi ainda... como funciona esse script ? pois eu estava olhando no código fonte e achei também a propriedade do CSS no "Height" em %...

Evandro Oliveira· 3 de mar.

perceba que ele possui várias imagens, a mesma foto, em resoluções diferentes.

para obter a resolução do visitante, utilize screenWidth para largura e screenHeight para altura

williamot· 3 de mar.

Mas quando você redimensiona o browser ela também é redimensionada, isso também tem a ver com o script ?

Evandro Oliveira· 3 de mar.

sim, perceba que, se você deixar bem pequenininho e ir aumentando gradativamente, a imagem só será 'redimensionada' quando couber uma da próxima altura definida

williamot· 3 de mar.

Hum entendeu.. E no caso o script seria apenas esse né?

Pq eu achei que fosse uma imagem só porém que ela estivesse grande e fosse diminuindo.

Vou dar uma estudada melhor sobre isso..

Muito obrigado viu, me ajudou bastante.. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif