CSS 속성 "height : auto;" 배경 이미지가 작동하지 않습니다

Question

CSS 속성 height: auto;이 세 가지 배경 이미지 중 하나의 클래스에서 작동하지 않는 시차 스크롤 효과가있는 웹 페이지가 있습니다. height: auto;을 사용하면 이미지가 사라집니다. 업로드 된 세 이미지의 크기는 각각 w = 1280px 및 h = 800px입니다. height: 641px을 사용하면 이미지는 w = 1025px 및 h = 641px에 비례하여 축소됩니다. 다른 높이를 사용하면 너비는 여전히 1025px이지만 높이는 CSS의 크기로 변경됩니다. 세 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; 
} 

페이지와 HTML과 height: 641px;를 사용하여 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에서 할 수 있습니다

힘을 발휘.

모든 현대의 브라우저가이를 지원하므로 이전 브라우저를 지원해야하는 경우가 아니면이 방법을 사용하십시오.

지원되는 브라우저 :

모질라 파이어 폭스 4.0 이상 (게코 2.0 이상), 마이크로 소프트 인터넷 익스플로러 9.0 이상, 오페라 10.0+, 사파리 4.1 (웹킷 532) 및 크롬 3.0 이상. 나는 당신이 필요로 이해하는 경우

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

당신이 height:50vh 사용할 수 있습니다