<img src="images/bg.jpg" id="bg" alt="">
//CSS
#bg {
position: fixed
top: 0
left: 0
/* Preserve aspet ratio */
min-width: 100%
min-height: 100%
}
或者
img.bg {/* Set rules to fill background */
min-height: 100%
min-width: 1024px
/* Set up proportionate scaling */
width: 100%
height: auto
/* Set up positioning */
position: fixed
top: 0
left: 0
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%
margin-left: -512px /* 50% */
}
}
或者
//HTML - From qifeiye.com<img src="images/bg.jpg" id="bg" alt="">
/CSS
#bg { position: fixed top: 0 left: 0 }
.bgwidth { width: 100% }
.bgheight { height: 100% }
//jQuery
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height()
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight')
} else {
$bg
.removeClass()
.addClass('bgwidth')
}
}
theWindow.resize(resizeBg).trigger("resize")
})
HTML5网页在电脑端和手机端都全屏显示的步骤如下：
1、打开HTML5网页代码。
2、在网页头部加上新代码，让网页的宽度自适应设备的宽度。代码如下：
<meta name="viewport" content="width=device-width
initial-scale=1.0
maximum-scale=1.0
minimum-scale=1.0
user-scalable=no" />
3、在输入代码完成后，把图片包括图片DIV 的宽度设置成百分之百即可。
