Question

我想知道如何将英雄形象填充到浏览器视口中。这样英雄部分的高度始终是视口的高度。

我提出了以下代码，但它无效：

function resizer() {
  var fulls = $('#hero');
  console.log(fulls);
  var win = $(window);

  resize.on(function() {
    fulls.height(win.height());
  });
};

Answer 1

在此http://jsfiddle.net/F7AN5/2/

尝试此代码

HTML：

<div id="hero">
      <img src="http://www.thememorist.com/wp-content/uploads/2012/03/superhero-blank1.jpg" alt=""/>
</div>

CSS：

body{
    padding:0;
    margin:0;
}
img{
    display:block;
}

的jQuery

$(document).ready(function(){
var resizeHero = function()
    {
      var hero = $("#hero"), window1 = $(window);
        hero.css({
            "width": window1.width(),
            "height": window1.height()
        });

        if(window1.width() < window1.height())
        {
             hero.find("img").css({
            "width": window1.width(),
            "height": "auto"
            });        
        }
        else
        {
             hero.find("img").css({
             "height": window1.height(),
             "width": "auto"
            });            
        }
    };

    resizeHero();

    $(window).resize(function(){
      resizeHero();    
    });
});

Answer 2

只需使用视口宽度和高度：

fulls.style.height = "100vh"; //which means 100% of the viewport height, same works for width

设置视口元标记是个好主意：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 3

尝试使用：

$(window).resize(function() {
    $('#hero').height($(window).height());
}).resize();

如何使英雄部分始终填充浏览器窗口？

3 个答案: