CSSのプロパティ "height：auto;"背景画像のために働いていません

Question

CSSプロパティheight: auto;が3つの背景画像のいずれのクラスでも動作していない、視差スクロール効果を持つウェブページがあります。 height: auto;を使用すると、画像が消えます。 3つのアップロードされた画像の寸法はそれぞれw = 1280pxとh = 800pxです。 height: 641pxを使用すると、画像はw = 1025pxとh = 641pxに比例して縮小されます。別の高さを使用すると、幅はまだ1025pxですが、高さはCSSのものに変わります。 3つのCSSクラスは次のとおりです。

.bgimg-1 { 
    background-image: url("https://c2.staticflickr.com/8/7321/27335183304_11cd309852_b.jpg"); 
    max-width: 100%; 
    height: 641px; 
} 
.bgimg-2 { 
    background-image: url("https://c2.staticflickr.com/8/7632/27335194304_72890c2d62_b.jpg"); 
    max-width: 100%; 
    height: 641px; 
} 
.bgimg-3 { 
    background-image: url("https://c2.staticflickr.com/8/7436/27947379025_844956bcf0_b.jpg"); 
    max-width: 100%; 
    height: 641px; 
} 

height: 641px;を使用してページとそのHTMLやCSSがhttp://codepen.io/mlswartz/full/NrpzpN/で見ることができます。これは、適切に画像に反応するように固定する必要があります。私はBootstrap 3.3.6とFont-awesome 4.6.3を使用しています。私が使用しているモニターが5あります。x 1024

Answer 1

あなたは私はあなたが必要なものを理解すればわからないが、あなたは `バックグラウンド・サイズを使用することができます代わりにvhで

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    font-size: 3.5em; 
 
    color: #FF0000; 
 
} 
 
h2 { 
 
    font-size: 1.5em; 
 
} 
 
a { 
 
    color: #FF0000; 
 
} 
 
a:hover { 
 
    color: #00FF00; 
 
} 
 
.row { 
 
    display: flex; 
 
} 
 
.side-panels { 
 
    background-image: url("https://c2.staticflickr.com/8/7676/27334382193_951bb3afa6_m.jpg"); 
 
    background-attachment: fixed; 
 
} 
 
#navigation { 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    background-color: #000000; 
 
    color: #FF0000; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background-color: #000000; 
 
    color: #FF0000; 
 
} 
 
.social-buttons { 
 
    position: absolute; 
 
    top: 22%; 
 
} 
 
.bgimg-1, 
 
.bgimg-2, 
 
.bgimg-3 { 
 
    position: relative; 
 
    background-attachment: fixed; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    max-width: 100%; 
 
    height: 50vh 
 
} 
 
.bgimg-1 { 
 
    background-image: url("https://c2.staticflickr.com/8/7321/27335183304_11cd309852_b.jpg"); 
 
} 
 
.bgimg-2 { 
 
    background-image: url("https://c2.staticflickr.com/8/7632/27335194304_72890c2d62_b.jpg"); 
 
} 
 
.bgimg-3 { 
 
    background-image: url("https://c2.staticflickr.com/8/7436/27947379025_844956bcf0_b.jpg"); 
 
} 
 
.about-me-box { 
 
    position: absolute; 
 
    width: 80%; 
 
    margin-top: 11.3%; 
 
    margin-left: 8.5%; 
 
    opacity: 0.7; 
 
} 
 
.about-me-text { 
 
    background-color: white; 
 
    font-size: 1.5em; 
 
    color: #000000; 
 
    text-align: justify; 
 
    padding: 5% 6% 5% 6%; 
 
} 
 
.portfolio-box { 
 
    position: absolute; 
 
    margin-top: -.38%; 
 
    margin-left: 16%; 
 
} 
 
.project-boxes { 
 
    margin-right: 5.5%; 
 
    margin-bottom: 7%; 
 
    margin-left: 9.5%; 
 
    opacity: 0.95; 
 
} 
 
.contact-box { 
 
    position: absolute; 
 
    width: 80%; 
 
    margin-top: 5.08%; 
 
    margin-left: 8.55%; 
 
} 
 
.get-info-box { 
 
    background-color: white; 
 
    position: absolute; 
 
    width: 80%; 
 
    margin-left: 10%; 
 
    padding: 4.5% 5% 3% 5%; 
 
    opacity: 0.92; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-1 side-panels"></div> 
 
    <div class="col-xs-10"> 
 
     <div class="bgimg-1" id="about-me"> 
 
     <div class="col-xs-12"> 
 
      <div class="about-me-box"> 
 
      <h1>&lt;about-me\&gt;</h1> 
 
      <div class="about-me-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur 
 
       adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</div> 
 
      </div> 
 
      <!-- end 'about-me-box' --> 
 
     </div> 
 
     <!-- end 'col-xs-12' --> 
 
     </div> 
 
     <!-- end 'bgimg-1' --> 
 
     <div class="bgimg-2" id="portfolio"> 
 
     <div class="col-xs-12"> 
 
      <div class="portfolio-box"> 
 
      <h1>&lt;portfolio\&gt;</h1> 
 
      <div class="row"> 
 
       <div> 
 
       <div style="text-align: left;"> 
 
        <img src="https://c2.staticflickr.com/8/7352/27913553156_b94863e654.jpg" class="img-responsive project-boxes"> 
 
       </div> 
 
       <div style="text-align: left;"> 
 
        <img src="https://c2.staticflickr.com/8/7546/27335393704_3f3da88521.jpg" class="img-responsive project-boxes"> 
 
       </div> 
 
       </div> 
 
       <div> 
 
       <div style="text-align: center;"> 
 
        <img src="https://c2.staticflickr.com/8/7439/27335383754_7893f67c47.jpg" class="img-responsive project-boxes"> 
 
       </div> 
 
       <div style="text-align: center;"> 
 
        <img src="https://c2.staticflickr.com/8/7369/27335397614_c57a904d58.jpg" class="img-responsive project-boxes"> 
 
       </div> 
 
       </div> 
 
       <div> 
 
       <div style="text-align: right;"> 
 
        <img src="https://c2.staticflickr.com/8/7654/27335389644_a229e24a25.jpg" class="img-responsive project-boxes"> 
 
       </div> 
 
       <div style="text-align: right;"> 
 
        <img src="https://c2.staticflickr.com/8/7384/27668437480_3241364329.jpg" class="img-responsive project-boxes"> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <!-- end 'row' --> 
 
      </div> 
 
      <!-- 'portfolio-box' --> 
 
     </div> 
 
     <!-- end 'col-xs-12' --> 
 
     </div> 
 
     <!-- end 'bgimg-2' --> 
 
     <div class="bgimg-3" id="contact"> 
 
     <div class="col-xs-12"> 
 
      <div class="contact-box"> 
 
      <h1>&lt;contact-me\&gt;</h1> 
 
      <div class="get-info-box"> 
 
       <form> 
 
       <div class="form-group"> 
 
        <input type="text" id="name" name="user_name" class="form-control" placeholder="Name (required)" required/> 
 
       </div> 
 
       <div class="form-group"> 
 
        <input type="email" id="email" name="user_email" class="form-control" placeholder="Email address (required)" required/> 
 
       </div> 
 
       <div class="form-group"> 
 
        <input type="text" id="phone" name="user_phone" class="form-control" placeholder="Phone number (optional)" maxlength="14" /> 
 
       </div> 
 
       <div class="form-group"> 
 
        <textarea type="text" id="comment" name="user_comment" class="form-control" placeholder="Type your comment here (required) 500 characters max" required rows="7" maxlength="500"></textarea> 
 
       </div> 
 
       <button class="btn btn-primary pull-right" type="submit"> 
 
        <i class="fa fa-paper-plane"></i> Submit 
 
       </button> 
 
       </form> 
 
      </div> 
 
      <!-- end 'get-info-box' --> 
 
      </div> 
 
      <!-- end 'contact-box' --> 
 
     </div> 
 
     <!-- 'col-xs-12' --> 
 
     </div> 
 
     <!-- end 'bgimg-3' --> 
 
     <div class="bgimg-1"></div> 
 
    </div> 
 
    <!-- end 'col-xs-10' --> 
 
    <div class="col-xs-1 side-panels"></div> 
 
    </div> 
 
    <!-- end 'row' --> 
 
</div> 
 
<!-- end 'container-fluid' --> 
 
<div class="container-fluid" id="navigation"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <h2 id="myName" style="color: #FF0000;">&lt;michael-swartz\&gt;</h2> 
 
    </div> 
 
    <div class="col-xs-2"><a href="#about-me"><h2>About Me</h2></a> 
 
    </div> 
 
    <div class="col-xs-2"><a href="#portfolio"><h2>Portfolio</h2></a> 
 
    </div> 
 
    <div class="col-xs-2"><a href="#contact"><h2>Contact</h2></a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container-fluid" id="footer"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <h2 id="myName" style="color: #FF0000;">&lt;social-media-links\&gt;</h2> 
 
    </div> 
 
    <div class="col-xs-1"> 
 
     <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook fa-2x social-buttons"></i></a> 
 
    </div> 
 
    <div class="col-xs-1" class="social-buttons"> 
 
     <a href="http://www.freecodecamp.com" target="_blank"><i class="fa fa-fire fa-2x social-buttons"></i></a> 
 
    </div> 
 
    <div class="col-xs-1"> 
 
     <a href="http://www.github.com" target="_blank"><i class="fa fa-github fa-2x social-buttons"></i></a> 
 
    </div> 
 
    <div class="col-xs-1" class="social-buttons"> 
 
     <a href="http://www.linkedin.com" target="_blank"><i class="fa fa-linkedin fa-2x social-buttons"></i></a> 
 
    </div> 
 
    <div class="col-xs-1"> 
 
     <a href="http://www.pinterest.com" target="_blank"><i class="fa fa-pinterest fa-2x social-buttons"></i></a> 
 
    </div> 
 
    <div class="col-xs-1" class="social-buttons"> 
 
     <a href="https://stackoverflow.com/users/1476365/michael-swartz" target="_blank"><i class="fa fa-stack-overflow fa-2x social-buttons"></i></a> 
 
    </div> 
 
    <div class="col-xs-1"> 
 
     <a href="http://www.tumblr.com" target="_blank"><i class="fa fa-tumblr fa-2x social-buttons"></i></a> 
 
    </div> 
 
    <div class="col-xs-1"> 
 
     <a href="http://www.twitter.com" target="_blank"><i class="fa fa-twitter fa-2x social-buttons"></i></a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- end 'container-fluid' -->

Answer 2

CSS2

あなたが画像を大きくする必要がある場合1280の画面解像度を持つ4のアスペクト比を、あなたは、画像そのものを編集する必要がありますイメージエディタ。

imgタグを使用すると、サイズを変更できますが、イメージが他のコンテンツの背景になる必要がある場合は、希望の結果が得られません（望むように繰り返しません）。 ）...

CSS3これは、バックグラウンドサイズとCSS3で行うことが可能です

力を発揮します。

すべての現代のブラウザがこれをサポートしています。古いブラウザをサポートする必要がある場合を除き、これがその方法です。

対応ブラウザ：

Mozilla Firefoxの4.0以降（ヤモリ2.0+）は、MicrosoftのInternet Explorer 9.0以降、Operaの10.0+、サファリ4.1以降（webkitの532）とChrome 3.0+。表紙：

.bgimg-1, .bgimg-2, .bgimg-3 { 
    /* width: will stretch to width of element, height: 641px */ 
    background-size: 100% 641px; 
}