Question

我正在尝试在我的背景上放一张照片，我的想法是图像填满整个窗口，无论它的大小是多少。

我正在使用下面的html，css和脚本：

// Funcao adaptImage()
// Parametros: targetimg 
function adaptImage(targetimg) {
  var wheight = $(window).height();
  var wwidth = $(window).width();


  targetimg.removeAttr("width")
  .removeAttr("height")
  .css({ width: "", height: "" });

  var imgwidth = targetimg.width();
  var imgheight = targetimg.height();

  var destwidth = wwidth;
  var destheight = wheight;


  if(imgheight < wheight) {


    destwidth = (imgwidth * wheight)/imgheight;

    $('#fundo img').height(destheight);
    $('#fundo img').width(destwidth);
  }




  destheight = $('#fundo img').height();
  var posy = (destheight/2 - wheight/2);
  var posx = (destwidth/2 - wwidth/2);


  if(posy > 0) {
    posy *= -1;
  }
  if(posx > 0) {
    posx *= -1;
  }


  $('#fundo').css({'top': posy + 'px', 'left': posx + 'px'});
}


$(window).resize(function() {
  adaptImage($('#fundo img'));
});


$(window).load(function() {
  $(window).resize();
});

#fundo-externo {
  overflow: hidden; 
  width: 100%;
  height: 100%;
  position: relative; 
}

#fundo {
  position: fixed; 
  width: 100%;
  height: 100%;
}

#fundo img {
  width: 100%; 
  position: absolute;
}

#site {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 560px;
  padding: 20px;
  margin-left: -300px; 
  background: #FFF; 
  background: rgba(255,255,255,0.8); 
}

<body>
  <div id="fundo-externo">
    <div id="fundo">
      <img src="http://placehold.it/1920x1080" alt="" />
    </div>
  </div>
</body>

我的问题是在某些设备上，背景没有完全填满，下面会出现一个白名单。

任何想法都会有所帮助非常感谢

Answer 1

将此设置用于背景图像

.for_background_img  {
  background-size: cover; 
  background-size: 100%;
  background-repeat: no-repeat;  
   height: 100%;
}

Answer 2

不要使用<img>标记，而是将图像用作身体的背景图像：

body {
  background: url('http://placehold.it/1920x1080') no-repeat;
  background-position: fixed;
  background-size:cover;
}

填充窗口背景

2 个答案: