如何在引导程序上制作全屏图像？答案

【问题标题】：How to make a fullscreen image on bootstrap?如何在引导程序上制作全屏图像？
【发布时间】：2016-04-24 01:15:21
【问题描述】：

这里是一个例子：https://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/

在示例中，背景登录页面填充了视口的宽度，不占用整个页面的宽度，并且是响应式的。你如何使用 bootstrap 手动编码这样的图像？

【问题讨论】：

有很多关于这个的文章。试着搜索一下。例如：stackoverflow.com/questions/24721935/…

【解决方案1】：

你用这个来填充标签：

-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;

【讨论】：

【解决方案2】：

基于这个article，你只需要定义一个带有id的div，然后像这样把图片放在里面：

 <div id="bg">
    <img src="yourimg.jpg" alt="">
  </div>

然后给出这个样式：

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}


.back {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;

}

这应该可以解决问题。你可以看到这个并播放here （要全屏查看，只需点击“Auto-run js”旁边右上角的箭头）。

【讨论】：