Arka plan resmi yeniden boyutlandırma ekrana bağlıdır

Question

Bootstrap carousel'im var. Öğelerden biri, yalnızca içeriği olmayan bir arka plan resmine sahiptir. Bir yükseklik koyarım, böylece içeriksiz olarak görülebilir. Ama cep telefonunda görüntülemeye çalıştığımda, tam görüntüsünü göremiyorum. Sadece bir kısmı. Ekran yeniden boyutlandırıldığında veya RWD görünümünde görüntüyü nasıl yeniden boyutlandırabilirim. Belirli bir maddeye mutlak pozisyon koymaya çalışıyorum ve ebeveyn div pozisyonunu göreceli hale getirmeye çalışıyorum ama bu pozisyonu mutlak konuma getirdiğimde ortadan kalkar.

İşte sen koyabilirsiniz kodum

<div id="custom-banner-wrapper" style="position: relative;"> 
    <div id="custom-banner" class="carousel slide" data-ride="carousel"> 

    <div class="carousel-inner custom-banner-inner"> 

    <div id="custom-banner-fullwidth" class="item custom-banner-item active" 
    style='background-color: #2c1946; background-image: url("./catalog/view/theme/broadwaytheme/images/banner-1.png"); background-repeat:no-repeat; background-position: top center; background-size: cover; position:absolute;'> 
     <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 custom-banner-caption"> 

     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<ol class="carousel-indicators" style="bottom:0px;"> 
    <li data-target="#custom-banner" data-slide-to="0" class="active"></li> 
    <li data-target="#custom-banner" data-slide-to="1"></li> 
    <li data-target="#custom-banner" data-slide-to="2"></li> 
</ol> </div></div> 

Answer 1

var
background-position: 100% 100%; max-yükseklik:% 100; maksimum genişlik: Sonra senin sorunun

Answer 2

Sen css stil yerindelik backgound-size:100% 100% kullanabilir ve bu div uzatılır olacaktır veya background-size:contain kullanabilir ve görüntü yer alacak çözüldü olacak

100% div (bütün div bunu stretchig ama alışkanlık kapsayacak olmadan.

Answer 3

sen. yama altında kullanabileceğiniz bu çözümde görüntünün tam kapağını ve dIV içinde görüntünün merkez bölümünü alırsınız.

.your_class { background-size: cover; background-position:center center;}