完成网页页面情况照片拉伸的两种方式

2021-03-20 22:31 jianzhan
处理方式有两种:

1种是CSS,应用background-size:cover完成照片的拉伸实际效果,可是IE8及下列版本号不适用background-size,因而可使用微软的滤镜实际效果,可是IE6不适用。

拷贝编码
编码以下:

body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}

另外一种是应用jQuery,在body中动态性插进1个div,随后在div里包括1张照片,访问器对话框更改尺寸时,动态性设定情况照片的规格。
拷贝编码

拷贝编码
编码以下:

$(function(){
$("body").append("<div id='main_bg' style="position:absolute;"/>");
$("#main_bg").append("<img src='bg.jpg' id='bigpic'>");
cover();
$(window).resize(function(){ //访问器对话框转变
cover();
});
});
function cover(){
var win_width = $(window).width();
var win_height = $(window).height();
$("#bigpic").attr({width:win_width,height:win_height});
}