前端开发图片自适应屏幕
摘要：前端开发网站大全 网站前端开发代码 网站开发前端 适合满屏图片，对于宽高不协调等比例缩进，一直都上下左右居中。 代码片段 1 <!DOCTYPE html> <html lang=”zh_cn”> <head> &……
前端开发网站大全 网站前端开发代码 网站开发前端
适合满屏图片，对于宽高不协调等比例缩进，一直都上下左右居中。
代码片段 1
<!DOCTYPE html>
<html lang=”zh_cn”>
<head>
<meta charset=”UTF-8″>
<title>图片自适应屏幕</title>
</head>
<style>
body,
img,
div {
margin: 0;
padding: 0;
}
img {
display: block;
width: 100%;
}
.img {
position: absolute;
}
</style>
<script>
$(function () {
var $pages = $(‘.nav’)
var wid = $(window).width();
var hei = $(window).height();
var $pageStages = $(“.img”);
var fixWinHW = function () {
hei = $(window).height();
wid = $(window).width();
}
var fixPageHeight = function () {
$pages.height(hei);
}
var fixPageBg = function () {
$pageStages.each(function () {
var win = wid / hei;
var nva = 1659 / 960;
if (win > nva) {
$(“.img”).css({ “width”: wid, “height”: wid / nva });
var tops = hei – $(“.img”).height();
$(“.img”).css({ “top”: tops / 2, “left”: 0 });
} else if (win < nva) {
$(“.img”).css({ “width”: hei * nva, “height”: hei });
var lefts = wid – $(“.img”).width();
$(“.img”).css({ “top”: 0, “left”: lefts / 2 });
} else {
$(“.img”).css({ ‘width’: wid, ‘height’: hei, ‘left’: 0, ‘top’: 0 });
}
});
};
$(window).on(‘resize’, function () {
fixPageBg();
fixPageHeight();
fixWinHW();
});
fixPageBg();
fixPageHeight();
fixWinHW();
})
</script>
<body>
<div class=”nav” style=”position:relative; width:100%; overflow:hidden;”>
<div class=”img”><img src=”http://www.mqjj.com/templets/spy/images/bg3.jpg”></div>
</div>
</body>
</html>
前端开发网站知乎 web前端开发技术网站 网站前端开发面试题
» 本文来自：前端开发者 » 《前端开发图片自适应屏幕》
» 本文链接地址：https://www.rokub.com/5542.html
» 您也可以订阅本站：https://www.rokub.com
近期评论