3つの水平な応答性のある背景画像を作成する方法

Question

水平に整列された3つの背景画像を作成しようとしていますが、ブラウザの100% widthをスパンしますが、最大高さは800px;です。私は使用していますglorious bootstrap今のところ、あなたは高さを読み取っていない画像b/cを見ることができません。

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; 

} 

Answer 1

あなたは背景としては、高さを知ることはないだろうブラウザを画像を使っているので。身長を自分で設定できますが、縦横比は維持されません。これにはパディング率のトリックを使用する必要があります。ここをクリックhttps://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ それ以外の場合は、クラスcasestudy-panelでdivをimgタグに変更し、urlをsrc属性に設定できます。