如何使一個負責任的英雄形象與像引導

Question

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我現在用的特定頁面

<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; 
      } 
    } 

我上想要實現像引導程序那樣的響應式英雄圖像，在調整屏幕大小的同時不會裁切和顯示圖像的每個像素。

問題是我已經在CSS background-size: cover中使用，這會導致在調整大小的同時在某些點裁剪圖像，並在小屏幕上裁剪整個圖像。

我也在CSS background-size: contain中使用，但使用這個圖像是響應，但從中心裁剪格式;

如何實現圖像的響應？

任何幫助讚賞。提前致謝。

Answer 1

使用background-size：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>