`
haohappy2
  • 浏览: 326418 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

how to resize image in order to make it full screen

阅读更多
// RUN WHEN DOM IS READY
$(function(){
   bg_adjustments = function() {
        var bgwidth = $("#bg").width();
        var bgheight = $("#bg").height();
        if($("#bg").attr("width")){
             bgwidth = $("#bg").attr("width");
        }
		if($("#bg").attr("height")){
		   bgheight = $("#bg").attr("height");
		}
	    var aspectRatio  = bgwidth / bgheight;
		var error_height=0;
		if ($("#errorBody")){
		   error_height = $("#errorBody").height();
		}
        var mb_height = $(window).height() - $("#header").height() - $("#header-additional").height() - $("#footer").height()+error_height;
        var mb_width=$(window).width();
        if(mb_width<1024){
           mb_width=1024;
        }
		var minHeight = 613;
        if(mb_height<minHeight){
           mb_height=minHeight;
        }
		// this is defined for the problem if the content is too long
		if(mb_height< ($("#content_container").height())){
		   mb_height = $("#content_container").height();
		}
        
		// define the background width and height 
        $("#bg").css("height",function() {			
                return mb_height;
	    });
		
		var bg_resize_width= mb_height*aspectRatio;
		
				
		
        $("#bg").css("width",function() {
                return bg_resize_width;
	    });
		
        //end define

		//define the div of background 
        if(bg_resize_width>mb_width){
		  $("#main_container").css("overflow","hidden");   
		}
			    $("#main_container").css("height",function() {
			return mb_height;
	    });
		$("#main_container").css("width",function() {
			return mb_width;
	    });
        //end define
		
		//define the content's position
        $("#content_container").css("top",function() {   
		   var mb_top = $("#header").height() + $("#header-additional").height();
		   return mb_top;
	    });

        $("#content_container").css("left",function() {   
		   var mb_left = ($(window).width() - 1000)/2;//min window width:1024px;
		   if (mb_left<12){
			   mb_left=12;
		   }
		   return mb_left;
	    });
		//end define
		
		//define the Touts's position
		var content_bottom=$("#content-bottom");
		if (content_bottom){
			content_bottom.css('top',function(){
					var minHeight = 613;
					if(mb_height<minHeight){
					   mb_height=minHeight;
					}
					var newTop = 0;
					if( mb_height > 613){
						newTop = ( mb_height - 600)/2;
					}
					return newTop;
			});
		}
		//end define
				
    }
    $(document).ready(bg_adjustments);
    $(window).resize(bg_adjustments);
	setTimeout(bg_adjustments, 500);
    
});

 

分享到:
评论

相关推荐

    php缩放图片类resizeimage

    $ri = new resizeimage("path/to/image.jpg", 200, 200, 1); ``` 这将创建一个`resizeimage`对象,尝试将`image.jpg`缩放到200x200像素,并进行裁剪以适应指定的尺寸。 #### 5. 性能与优化 虽然`resizeimage`类提供...

    ResizeImage

    标题“ResizeImage”指的是一个基于VC++6.0和OpenCV库实现的图像尺寸调整工具。这个项目的主要目的是提供一种简单的方法来改变数字图像的大小,可能是为了适应不同的显示设备、存储需求或图像处理任务。在本文中,...

    resizeImage.rar

    在IT行业中,图像处理是一项非常重要的任务,尤其是在网站开发、社交媒体、数字营销等领域。"resizeImage.rar"这个压缩包文件显然包含了一套解决方案,用于批量处理大尺寸照片,使其适应不同的展示需求。以下是对该...

    OpenCV 3.x with Python By Example, 2nd Edition-Packt Publishing(2018).pdf

    We will discuss how to detect interesting parts of an image and see how we can resize a given image without deteriorating those interesting parts. Chapter 8, Detecting Shapes and Segmenting an Image,...

    resizeImage.ts

    resizeImage.ts

    imresize.zip_matlab resize_resize image_resize image matlab_resi

    newImage = imresize(oldImage, [newHeight newWidth]) newImage = imresize(oldImage, sz) ``` 在这里,`oldImage`是原始图像,`newImage`是调整大小后的图像。`scale`可以是一个标量,表示按原图像的比例缩放;也...

    ckfinderplugin-imageresize-2.3.jar

    《CKFinder插件ImageResize 2.3版详解》 CKFinder是一款强大的文件管理器,广泛应用于网页编辑器和内容管理系统中,它提供了便捷的图片、文档和其他资源的上传、管理和检索功能。其中,"ckfinderplugin-imageresize...

    Image Resize Guide v2.2.8.zip

    Image Resize Guide可以自由调整图片大小,当前能够修改图片大小软件很多很多,基本上图片处理软件都能修改图片大小。 你只需点击几次鼠标,软件会自动帮你完成余下的工作。对雪景,水或绿树背景的图片效果出众,重要...

    opencvsharp-20个例子

    Sample01: How to create a simple 2D image and show it using OpenCV Window. Sample02: How to load and display images. Sample03: How to create a gray-scale image. Sample04: How to apply different ...

    OpenCVSharp 最新4.0 的19个例子

    Sample01: How to create a simple 2D image and show it using OpenCV Window. Sample02: How to load and display images. Sample03: How to create a gray-scale image. Sample04: How to apply different ...

    OpenCVSharp-DEMO.zip

    Sample01: How to create a simple 2D image and show it using OpenCV Window. Sample02: How to load and display images. Sample03: How to create a gray-scale image. Sample04: How to apply different ...

    Shows how to resize a picture box control on a form at run t

    Dim ratio As Double = PictureBox.Image.Width / PictureBox.Image.Height newHeight = newWidth / ratio End If ' Set new size while checking boundaries PictureBox.Size = New Size(Math.Max(newWidth, ...

    CKFinderPlugin-ImageResize-2.3.1.jar

    CKFinderPlugin-ImageResize-2.3.1.jar

    resize figure on screen according to papersize. in matlab

    在MATLAB中,"resize figure on screen according to papersize"是一个常见的需求,它涉及到图形窗口的布局管理和打印设置。当你想要让屏幕上的图形按照特定的纸张大小进行适配时,这通常是为了确保打印或者保存的...

    Laravel开发-resize-image

    这个`resize`方法使用了Intervention Image的`make`和`resize`方法,保持了原始图像的宽高比。 4. **预定义图像大小** 为了实现预定义的大小调整,可以在配置文件中定义不同的尺寸,例如: ```php return [ '...

    image-resize.rar_image resize matlab_resize image matlab

    把一个图片从1024*1024 变成 256 256 再从256变到1024,并查看两者差别,用双线性差值完成

    prj-2.rar_resize image matlab

    本项目“prj-2.rar_resize image matlab”聚焦于使用Matlab进行图像缩放的方法。Matlab是一款强大的数学计算软件,它提供了丰富的图像处理工具箱,使得图像的缩放变得简单而高效。 首先,我们需要了解图像缩放的...

    Envision Image LIB 2.56 Full

    Flexible image printing (original size, full page, specific width, specific height, specific width and height, stretch to page) Image processing: Anti-aliasing, brightness, contrast, convert to gray,...

    ImageResize

    imagesize可以对图片进行超简洁的处理,比ps方便易上手。

    uniapp editor富文本 quill.min.js image-resize.min.js

    5. 集成image-resize:通过Quill的自定义模块机制,将image-resize.min.js的功能集成进编辑器,处理图片上传和尺寸调整。 6. 监听事件:监听用户操作,如图片上传完成后的回调,以便进行进一步的数据处理或保存。 ...

Global site tag (gtag.js) - Google Analytics