un passo avanti l'ho fatto; questo il risultato : prova
però come potete vedere voi stessi in certi casi l'immagine si ridimensiona male venendo tagliata oppure appare uno spazio bianco tra l'immagine e il div sottostante.
questo è il codice js trovato su internet e leggermente modificato :
codice:
/** * @projectDescription Scalable Background Image * @author Matt Hobbs (http://nooshu.com/) * @version 0.1 * * Takes an IMG tag you want as a page / container background * and scales the image up / down depending on page size */ (function($){ $.fn.backgroundScale = function(customOptions){ //Merge default and user options var options = $.extend({}, $.fn.backgroundScale.defaultOptions, customOptions); return this.each(function(i){ var $this = $(this); var $bgImage = $(options.imageSelector); var $contenitore = $(options.contenitoreSelector); var altezza_immagine = 0; //Set some basic CSS positioning rules $this.css({position: "absolute"}); $bgImage.css({position: "absolute"}); //Define out vars var containerWidth, containerHeight, containerRatio; var imageWidth, imageHeight, imageRatio; //Manipulation function var imageManipulation = function(){ //Set the container details containerWidth = $this.width() + options.containerPadding; containerHeight = $this.height() + options.containerPadding; containerRatio = containerWidth / containerHeight; //Set the image details imageWidth = $bgImage.width(); imageHeight = $bgImage.height(); imageRatio = imageWidth / imageHeight; //Center the image within the container? if(options.centerAlign){ $bgImage.css({ left: '50%', top: '50%', marginLeft: -(containerWidth/2), marginTop: -(containerHeight/2) }); } //Decide what to do with the image if(imageRatio < containerRatio){//Width less than height $bgImage.css({ width: containerWidth, height: containerWidth * (1/imageRatio) }); altezza_immagine = containerWidth * (1/imageRatio); } else if(imageRatio > containerRatio){//Height less than width $bgImage.css({ width: containerHeight * imageRatio, height: containerHeight }); altezza_immagine = containerHeight; } else if(imageRatio == containerRatio){//Unlikely event ratios are equal //Image width less or equal to height, choose width as it's shorter if(imageWidth <= imageHeight){ $bgImage.css({ width: containerWidth, height: containerWidth * (1/imageRatio) }); altezza_immagine = containerWidth * (1/imageRatio); } else {//Else choose shorter height $bgImage.css({ width: containerHeight * imageRatio, height: containerHeight }); altezza_immagine = containerHeight; } } return altezza_immagine; } //Fire on page load var alt_img=imageManipulation(); $("#contenitore").css({top : alt_img}) //Add the browser resize event $(window).bind("resize.backgroundScale", function(){ var alt_img=imageManipulation(); $("#contenitore").css({top : alt_img}) }) }); } //Set our plugin defaults $.fn.backgroundScale.defaultOptions = { imageSelector: "#bgImage", contenitoreSelector: "#contenitore", containerPadding: 0 }; })(jQuery);
questo invece l'html :
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="author" content="Matt Hobbs (http://nooshu.com/)"> <title>Scalable Background Image</title> <style type="text/css"> body{padding:0px;margin:0px} #border { position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; } #border #gaBG {z-index: 3;} #contenitore{ width:100% ;height:800px;background-color: red;position: relative;top:0px;left:0px} </style> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("jquery", "1.4.1"); </script> <script src="js/jquery.background.image.scale-0.1.js" type="text/javascript"></script> <script type="text/javascript"> //Using document.ready causes issues with Safari when the page loads jQuery(window).load(function(){ $("#border").backgroundScale({ imageSelector: "#gaBG", centerAlign: true, }); }); </script> </head> <body> <div id="border"> [img]img/home.png[/img] </div> <div id="contenitore">prova</div> </body> </html>
Rispondi quotando