将图像放置在浏览器的 100% 宽度和 100% 高度的 div 中

Question

您好，问题很简单，但想不通。

我想用图像填充浏览器，这样无论用户在浏览器中设置什么尺寸，我的图像都会填充内容。

我还需要图像保持居中，这样如果用户将浏览器缩小，图像将保持居中并首先失去边缘，希望他有意义。

这背后的原因，我打算在它的地方放一个插件，叫做图层滑块。

这是我的代码

<div id="div1">
<img src="images/gifts.jpg" height"100%" width"100%">
</div>

编辑 1：抱歉忘了补充，我需要保持图像成比例，这样如果用户减小浏览器的宽度，图像将保持居中但会开始失去边缘，如果用户随后减小高度，图像会缩小，因此无论浏览器的高度或宽度如何，它都会始终保持成比例。

编辑 2：这是我想要的链接，但我需要将图像放在 div 中。

谢谢

Answer 1

将高度和宽度应用于分隔线本身。

#div1 { height:100%; width:100%; }

如果高度不适用于分隔线，您需要将页面的 html 和正文更改为也具有 100% 的高度。清除填充和边距也是一个好主意。

html, body { height:100%; padding:0; margin:0; }

JSFiddle.

如果您还希望该分隔线出现在后面的其他内容之上，则需要将其 z-index 设置为大于后面的内容并定位分隔线：

body { position:relative; z-index:1; }
#div1 { position:fixed; z-index:1000; }

编辑：

保持图像比例：

/* If the browser doesn't support media queries */
div#div1 img { height:100%; width:100%; }

/* If the screen is portrait */
@media screen and (orientation:portrait) { 
    div#div1 img { height:auto; width:100%; }
}

/* If the screen is landscape */
@media screen and (orientation:landscape) {
    div#div1 img { height:100%; width:auto; }
}

更新JSFiddle。

Answer 2

添加以下CSS

#div1 img {
    position : absolute;
    height:100%;
    width:100%
}

Answer 3

试试这个：

如果要设置 div 或任何元素的高度，则应将 body 和 html 的高度设置为 100%。

body,html{
  height:100%;
}

#div1{
  height:100%
}

Answer 4

添加你的图片

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

});