将图像放置在浏览器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");

});

Answer 5

অনেক সময় ছবি বা ইমেজ প্রদর্শিত না হওয়ার কার ন হলো _ ছবির ফাইলের নাম ভুল হলে,ছবির এক্সটেনশন ভু লহলে，来源ভুলহলে，ছবিররেজুলেশনব্রাউজারেসাপোর্ট না করলে、ছবিটি নষ্ট হয়ে গেলে、এমনি ব্রাউজারে ছবদ বন্ধকরাথাকলে