html图片全屏适应,css – 全屏幕自适应背景图片

http://css-tricks.com/perfect-full-page-background-image/

//HTML

//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

//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");

});