Ir para conteúdo

POWERED BY:

Arquivado

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

Antonelli

Imagem em FullScreen, sem perder a PROPORÇÃO!

Por , em Javascript

Recommended Posts

Antonelli    0

Antonelli
Postado

Galera, tudo bom com todos?

Então... Estou tentando colocar uma imagem em FullScreen, sem perder a proporção, ou seja, sem distorcer!

Criei esse JS, baseado em algumas pesquisas:

 

function getWidth() {
		return window.innerWidth ? window.innerWidth : /* For non-IE */
			document.documentElement ? document.documentElement.clientWidth : /* IE 6+ (Standards Compilant Mode) */
			document.body ? document.body.clientWidth : /* IE 4 Compatible */
			window.screen.width; /* Others (It is not browser window size, but screen size) */
	}
	
	function getHeight() {
		return window.innerHeight ? window.innerHeight : /* For non-IE */
			document.documentElement ? document.documentElement.clientHeight : /* IE 6+ (Standards Compilant Mode) */
			document.body ? document.body.clientHeight : /* IE 4 Compatible */
			window.screen.height; /* Others (It is not browser window size, but screen size) */
	}
	
	function reSize(){
	
		var ratio = 768/1024;
		
		var imageWidth = 1280;
		var imageHeight = 960;
		
		var browserWidth = getWidth();
		var browserHeight = getHeight();
		
		var img = document.getElementById("imagem");
		
		if((browserHeight/browerWidtg) > ratio){
			img.height = browserHeight;
			img.width = browserWidth/ratio;
		}else{
			img.height = browserHeight;
			img.width = browserWidth*ratio;
		}
		
		alert("OK");
		
	}
	
	reSize();

Não está redimensionando a imagem... Capturando o tamanho da área do browser, está, mas não da imagem! =S

Coloquei o "alert" para testar, quando o "if" está no código, ele não alerta... Já se tirar o "if" ele alerta!

O que está errado?

 

Me baseei nesse código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

	<head profile="http://gmpg.org/xfn/11">

	<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
		(function($){
		
			//Resize image on ready or resize
			$.fn.supersized = function() {
			
				$(document).ready(function() {
					$('#supersize').resizenow(); 
				});
					
				$(window).bind("resize", function(){
					$('#supersize').resizenow(); 
				});
				
			};
			
			//Adjust image size
			$.fn.resizenow = function() {
				var options = $.extend($.fn.supersized.defaults);
				return this.each(function() {
					
					//Define image ratio
					var ratio = 768/1024;
					
					var imagewidth = $(this).width(); //pega a largura da imagem
					var imageheight = $(this).height(); //pega a altura da imagem
					var browserwidth = $(window).width(); //pega a largura da tela do browser
					var browserheight = $(window).height(); //pega a altura da tela do browser
		
					//Resize image to proper ratio
					if ((browserheight/browserwidth) > ratio){ 
						$(this).height(browserheight);
						$(this).width(browserheight / ratio);
					} else {
						$(this).width(browserwidth);
						$(this).height(browserwidth * ratio);
					}
					$(this).css('left', (browserwidth - $(this).width())/2);
					$(this).css('top', (browserheight - $(this).height())/2);
					return false;
				});
			};
			
		})(jQuery);
		$(function(){
	        $('#supersize').supersized(); 
	    });
	</script>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		a{
			color:#8FC2FF;
			text-decoration: none;
			outline: none;
		}
		a:hover{
			text-decoration: underline;
		}
		img{
			border:none;
		}
		body {
			overflow:hidden;/*Needed to eliminate scrollbars*/
			background:#000;
		}
		#supersize{
			position:fixed;
		}
		#supersize img{
			height:100%;
			width:100%;
			position:absolute;
			z-index: 1;
		}
		
	</style>
</head>

<body>

<!--Slides-->
<div id="supersize">
	<img src="images/bird.jpg" title="Bird On A Branch"/>
</div>


</body>
</html>

Que é de uma jQuery chamada SuperSized, porém, não posso usar jQuery, pois isto ficará hospedando em um tipo de HotSpot!

A lógica, acredito que seja a mesma... Mas o código que "criei" não funciona!

 

Desde já agradeço à ajuda de todos!

Grande abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

se voce mudar o width do elemento IMG ele mantem a proporção..não o style='width...

 

voce ajusta a largura e é auto ajustado a altura, mas claro se quiser colocar do tamanho da tela e a imagem não próximo do tamanho da tela vai fica ruim..

 

t+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antonelli    0

Antonelli
Postado

se voce mudar o width do elemento IMG ele mantem a proporção..não o style='width...

 

voce ajusta a largura e é auto ajustado a altura, mas claro se quiser colocar do tamanho da tela e a imagem não próximo do tamanho da tela vai fica ruim..

 

t+

 

Sim, sim... MAS VAMOS LÀ, o que quero é o seguinte:

 

- Colocar figura do tamanho da área utilizavel do browser (SEMPRE), ou seja, ou ela tem que estar "100%" no Width, ou "100%" no Height! Porque, por exemplo, se eu colocar a janela mais estreita (largura) e mais comprida (altura), aparecerá o fundo branco! Para isso, eu teria que ter uma forma de colocar de uma maneira que se a janela for estreitada demais, o HEIGHT fixará em "100%"!

 

Vou colocar umas SS do que estou falando!

 

USANDO O SUPERSIZED:

 

(maximizado)

Imagem Postada

 

(estreito na altura)

Imagem Postada

 

(estreito na largura)

Imagem Postada

 

USANDO O WIDTH EM 100%:

 

(maximizado)

Imagem Postada

 

(estreito na altura)

Imagem Postada

 

(estreito na largura)

Imagem Postada

 

Entenderam?

Acredito que meu código não está funcionando na seguinte parte:

 

var img = document.getElementById("imagem"); //Acho que o erro começa nessa linha!
                
                if((browserHeight/browerWidtg) > ratio){
                        img.height = browserHeight;
                        img.width = browserWidth/ratio;
                }else{
                        img.height = browserHeight;
                        img.width = browserWidth*ratio;
                }

Desde já agradeço!

Grande abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

hmm simples...

<html>
<head>
<script src='jquery.js'></script>
<script>

function resize(){
	$('#teste').width(window.outerWidth);
	$('#teste').height($(window).height());
}
window.onresize = resize;
</script>
</head>
<body>
	<img src='q.jpg' id='teste'/>	
</body>
</html>

Compartilhar este post

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

Informação importante

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

  Aceito