全屏自适应背景图片 [英] Full-screen responsive background image

问题描述

我是前端开发和基金会的新手。

我试图获得< div class = > 是一个全屏的图像，响应性地缩小。

任何人都可以告诉我我做错了什么？它正确缩放，但不显示完整的图像。我还想在移动设备上放置< div class =large-6 large-offset-6 columns> p>

HTML：

 <！ -  MAIN HEADER  - > ; 
< div class =main-header> 
< div class =row> 
< div class =large-6 large-offset-6 columns> 
< h1 class =logo> BleepBleeps< / h1> 
< h3>一对小朋友< br>的家庭，让父母更容易< / h3> 
< / div> <！ -  END large-6 large-offset-6 columns  - > 
< / div><！ -  END ROW  - > 
< / div><！ -  END MAIN-HEADER  - > 
  

CSS：

  .main-header {
 background-image：url（../ img / bb-background2.png）; 
 background-repeat：no-repeat; 
 background-position：center; 
 background-size：cover; 
 width：100％; 
 height：100％; 
} 
 
 h1.logo {
 text-indent：-9999px; 
 height：115px; 
 margin-top：10％; 
} 
  

解决方案

http://css-tricks.com/perfect-full-page-background-image/

  // HTML 
< img src =images / bg.jpgid =bgalt => 
 
 // CSS 
 #bg {
 position：fixed; 
 top：0; 
 left：0; 
 
 / *保留aspet比率* / 
 min-width：100％; 
 min-height：100％; 
} 
  

或

  img.bg {
 / *设置规则填充背景* / 
 min-height：100％; 
 min-width：1024px; 
 
 / *设置比例缩放* / 
 width：100％; 
 height：auto; 
 
 / *设置定位* / 
 position：fixed; 
 top：0; 
 left：0; 
} 
 
 @media屏幕和（max-width：1024px）{/ *特定于此特定图像* / 
 img.bg {
 left：50％ ; 
 margin-left：-512px; / * 50％* / 
} 
} 
  

  // HTML 
< img src =images / bg.jpgid =bgalt => 
 
 // 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）; 
 
}）; 
  

I am very new to Front-end development and Foundation.

I am trying to get <div class="main-header"> to be a full screen image that scales down responsively.

Can anyone tell me what I am doing wrong? It is scaling properly, but is not showing the full image. I also wanted the <div class="large-6 large-offset-6 columns"> to sit above it on a mobile device – is that possible?

The HTML:

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

The CSS:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}

解决方案

http://css-tricks.com/perfect-full-page-background-image/

//HTML
<img src="images/bg.jpg" id="bg" alt="">

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

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

OR

img.bg {
  /* 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;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

OR

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

});

这篇关于全屏自适应背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！