는 부트 스트랩

Question

같은 CSS로 대답하는 영웅의 이미지를 만드는 방법이이 내가 특정 페이지

<style type="text/css" media="screen"> 
@media screen and (min-width: 769px) 
    { 
     .page-img 
      { 
       margin-top: 63px; 
       background: url('assets/img/about.jpg') no-repeat center; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
       display: table; 
       height: 450px; 
       width: 100%; 
      } 
     .page-img .hero 
      { 
       background: rgba(0,0,0,0.6); 
       display: table-cell; 
       text-align: center; 
       vertical-align: middle; 
      } 
     .page-img .hero h1, .page-img .hero p 
      { 
       color:#ffffff; 
      } 
    } 
@media (max-width: 768px) 
    { 
     #hash-blog-section .page-img 
     { 
      margin-top: 59px; 
     } 
     .page-img 
      { 
       background: url('assets/img/about.jpg') no-repeat center; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
       display: table; 
       height: 250px; 
       width: 100%; 
      } 
     .page-img .hero 
      { 
       background: rgba(0,0,0,0.6); 
       display: table-cell; 
       text-align: center; 
       vertical-align: middle; 
      } 
     .page-img .hero p, .page-img .hero h1 
      { 
       color:#ffffff; 
      } 
     .page-img .hero p 
      { 
       text-align: justify; 
       text-align-last: center; 
       padding: 5px; 
       font-size: 15px; 
      } 
    } 

I에 사용하고 내부 CSS 내 HTML 코드

<div id="hash-blog-section"> 
    <div class="container" style="position: relative;"> 
     <section class="page-img"> 
      <section class="hero"> 
       <h1>About Us!</h1> 
       <p> 
        Dummy Data. 
       </p> 
      </section> 
     </section> 
    </div> 
</div> 

입니다 이미지의 모든 픽셀을 자르지 않고 화면의 크기를 조정하면서 보여주는 부트 스트랩과 같은 반응이 빠른 영웅 이미지를 얻고 싶습니다.

문제는 CSS background-size: cover에 사용되어 크기 조정 중에 일부 지점에서 이미지를 자르고 전체 이미지가 잘리는 작은 화면에서 발생합니다.

나는 CSS background-size: contain에도 사용했지만 이미지를 사용하면 반응이 있지만 가운데에서 자른 형식으로 표시됩니다.

어떻게 이미지의 응답 성을 얻을 수 있습니까?

감사합니다. 미리 감사드립니다.

Answer 1

배경 사용 : 100 % 100 %; 내가 감사를 원하는대로

.page-img 
 
     { 
 
      margin-top: 63px; 
 
      background: url('http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg') no-repeat center; 
 
      -webkit-background-size: 100% 100%; 
 
      -moz-background-size: 100% 100%; 
 
      -o-background-size: 100% 100%; 
 
      background-size: 100% 100%; 
 
      display:table; 
 
      min-height: 450px; 
 
      
 
      width: 100%; 
 
     } 
 
    .page-img .hero 
 
     { 
 
      background: rgba(0,0,0,0.6); 
 
      display: table-cell; 
 
      text-align: center; 
 
      vertical-align: middle; 
 
      
 
     } 
 
    .page-img .hero h1, .page-img .hero p 
 
     { 
 
      color:#ffffff; 
 
     } 
 
@media only screen and (max-width:768px){ 
 
.page-img{ 
 
     
 
    margin-top: 59px; 
 
    height: 250px; 
 
    } 
 
    .page-img .hero p{ 
 
    text-align: justify; 
 
    text-align-last: center; 
 
    padding: 5px; 
 
    font-size: 15px;  
 

 
} 
 
}

<div id="hash-blog-section"> 
 
    <div class="container" style="position: relative;"> 
 
     <section class="page-img"> 
 
      <section class="hero"> 
 
       <h1>About Us!</h1> 
 
       <p> 
 
        Dummy Data. 
 
       </p> 
 
      </section> 
 
     </section> 
 
    </div> 
 
</div>