所有图像内容出现在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

回答

相关问题