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的高度设置为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");

});

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

4 个答案: