固定高度的全瀏覽器寬度響應背景圖像

Question

我知道這種類型的問題已被問及一百萬次，看起來有大量的重複，但我一直無法找到文檔或找出如何非常具體：

1. 使圖像100％寬度的瀏覽器窗口。
2. 使圖像成爲背景圖像。
3. 使圖像響應。
4. 使圖像具有可調整的固定高度。 （意味着我可以使它500px高大或800px高大並且它保持其寬高比和全瀏覽器的寬度）

這是可能做與純CSS或是jquery的或javascript需要？

我也對引導技術開放。

目前我有這種技術，但它的侷限性在於我無法真正定義高度，並且在將內容放入內容時圖像會被裁剪。

HTML：

<div class="page-section"> 
    <?php if(get_field('landing_hero_image')): ?> 
     <div class="hero-img-wrap"> 
      <div class="landing-hero" style="background-image: url(<?php the_field('landing_hero_image'); ?>);"> 
      </div> 
     </div> 
    <?php endif; ?> 
</div> 

CSS：

.page-section { 
    width:100%; 
    position: relative; 
} 
.landing-hero { 
    padding: 22% 0 20% 0; 
    margin:auto; 
    width: 100%; 
    min-height: 100%; 
    -webkit-background-size: cover !important; 
    -moz-background-size: cover!important; 
    background-size: cover!important; 
    -o-background-size: cover!important; 
} 

Answer 1

我相信你能實現你想要的只有CSS什麼。鏈接來幫助你：

Responsive Images and Background Images

Keeping aspect ratio at all times

，我將發佈一個鏈接更多的評論。

Answer 2

我通過將cover屬性添加到body，然後使用填充在實際div內定義所需​​的高度來實現此目的。

CSS

.landing-hero { 
    background-size: 100% auto; 
    padding-bottom: 42%; 
    background-repeat: no-repeat; 
} 
body { 
    font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color:#444; 
    height: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

HTML

<?php if(get_field('landing_hero_image')): ?> 
    <div class="landing-hero" style="background-image: url(<?php the_field('landing_hero_image'); ?>);"> 
    </div> 
<?php endif; ?>