3 yatay, duyarlı arka plan resmi nasıl yapılır

Question

Tarayıcıda 100% width açıklıklı 3 arka plan görüntüsü oluşturmaya çalışıyorum ancak maksimum 800px; yüksekliğine sahip olmak istiyorum. glorious bootstrap kullanıyorum Şu an için görüntülerin b/c okuma yüksekliğini göremiyorsunuz.

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 bir arka plan olarak yükseklik bilmek gitmiyor tarayıcı resim kullanıyorsanız yana

.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

. Yüksekliği kendiniz ayarlayabilirsiniz ancak bu en boy oranını koruyamaz. Bunun için doldurma oranını kullanmanız gerekebilir. https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ Burada aksi taktirde, div'i casestudy-panel sınıfıyla bir img etiketine dönüştürebilir ve url'yi src özniteliğine ayarlayabilirsiniz.