1

嗨，简单的问题真的但无法弄清楚。

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

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

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

这是我的代码

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

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

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

谢谢

4

4 回答 4

3

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

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

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

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

JSF中。

如果您还希望该分隔线出现在后面的其他内容之上，则需要将其 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。

于 2013-02-15T12:50:52.723 回答
1

添加以下内容CSS

#div1 img {
    position : absolute;
    height:100%;
    width:100%
}
于 2013-02-15T12:52:06.193 回答
1

尝试这个：

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

body,html{
  height:100%;
}

#div1{
  height:100%
}
于 2013-02-15T12:57:41.080 回答
1

添加您的图像 

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

});
于 2013-02-15T12:58:19.210 回答