Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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();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"](http://www.w3.org/1999/xhtml) dir="ltr" lang="en-US">
<head profile="[http://gmpg.org/xfn/11">](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">](http://jqueryjs.googlecode.com/files/jquery-1.3.2.js)
<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!
Carregando comentários...