所有圖像內容出現在div

我有一個幻燈片放映的圖像，但圖像並沒有完全顯示。我該如何解決這個問題？無論高度如何，我都想展示圖片。此圖顯示我的問題。這是出現在我的幻燈片圖像的一部分所有圖像內容出現在div

html, 
 
body { 
 
    height: 85%; 
 
} 
 
.carousel, 
 
.item, 
 
.active { 
 
    height: 100%; 
 
} 
 
.carousel-inner { 
 
    height: 100%; 
 
} 
 
/* Background images are set within the HTML using inline CSS, not here */ 
 

 
.fill { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
}

<!-- Full Page Image Background Carousel Header --> 
 
<header id="myCarousel" class="carousel slide"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <!-- Wrapper for Slides --> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <!-- Set the first background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('img/slide1.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <!-- Set the second background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('img/slide2.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <!-- Set the third background image using inline CSS below. --> 
 
     <div class="fill" style="background-image:url('img/slide3.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
    <span class="icon-prev"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
    <span class="icon-next"></span> 
 
    </a> 
 
</header>

來源

2016-08-20 mhmd

對不起，不知道要包含什麼來將其轉化爲一個工作片段。無論如何，我想答案可能是將'background-size：cover'更改爲'background-size：contains'。 –

@MrLister當我把它包含圖像重複x – mhmd

thx我解決了這個寬度：100％; 身高：100％; background-position：center; -webkit-background-size：contains; -moz-background-size：contains; background-size：contains; -o-background-size：contains; background-repeat：no-repeat; background-size：100％100％; background-origin：content-box; – mhmd

謝謝，你

我解決這樣的問題

width: 100%; 
    height:100%; 
    background-position:center ; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    background-size: contain; 
    -o-background-size:contain; 
    background-repeat: no-repeat; background-size: 100% 100%;background-origin: content-box;

來源

2016-08-22 08:33:26 mhmd

所有圖像內容出現在div

回答

相關問題