如何製作3個水平的，響應的背景圖像

我想創建3個水平對齊的背景圖像，並且跨度爲100% width的瀏覽器，但最大高度爲800px;我也希望它們縮小響應。我正在使用glorious bootstrap截至目前你看不到圖像B/C它不是閱讀高度。如何製作3個水平的，響應的背景圖像

HTML

<div class="row"> 
     <div class="col-xs-4 col-md-4" style="margin:0 !important; padding:0 !important"> 
      <a href="mysite"> 
       <div class="casestudy-panel" style="background: url(myimage.jpg);"></div> 
      </a> 
     </div> 
     <div class="col-xs-4 col-md-4" style="margin:0 !important; padding:0 !important"> 
      <a href="mysite"> 
       <div class="casestudy-panel" style="background: url(myimage.jpg);"></div> 
      </a> 
     </div> 
     <div class="col-xs-4 col-md-4" style="margin:0 !important; padding:0 !important"> 
      <a href="mysite"> 
       <div class="casestudy-panel" style="background: url(myimage.jpg);"></div> 
      </a> 
     </div> 
    </div> 
</div>

CSS

.casestudy-panel{ 
     max-width:100%; 
     height: auto; 
    } 
    .casestudy-panel img { 
     max-width:100%; 
     height: 100%; 
     -webkit-background-size: cover !important; 
     -moz-background-size: cover!important; 
     background-size: cover!important; 
     -o-background-size: cover!important; 

}

來源

2016-03-31 rlm

請發佈呈現的HTML，而不是PHP源代碼。另外，請考慮使用Stack Snippets功能（圖標看起來像帶尖括號的頁面）。 –

@MikeMcCaughan呈現html已啓用。提前致謝。 – rlm

由於您使用的圖像作爲背景，它不會知道高度的瀏覽器。你可以自己設置高度，但不能保持高寬比。您可能必須使用填充比率技巧。看到這裏https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ 否則，也許你可以把類casestudy-panel的div變成一個img標籤，並將url設置爲src屬性。

來源

2016-03-31 23:03:06 gabesoft

我試過，但我無法弄清楚如何實現background-size：cover技術。它顯示了利潤率，並且不會互相沖洗圖像。 – rlm

該概念的工作。我給casestudy-panel div提供了85％的底部填充和100％的寬度。感謝m8 – rlm

如何製作3個水平的，響應的背景圖像

回答

相關問題