Question

有没有办法在bootstrap轮播中显示完整图像。我希望容器能够获取图像的完整大小，但是它会在底部缩短它。

.carousel-indicators li{
    width: 10px !important;
    height: 10px !important;
    border-radius: 100% !important;
}
#hero {
    position: relative;
}

#course-form{
    
}
#carousel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.carousel-inner,
.carousel-item {
    height: 100%;
    
}
.carousel-item {
    background: no-repeat center/cover;
    background-size: cover;
}

.logo {
    height: 30vh;
    width: 15vw;
    position: relative;
    bottom: 100px;
    right: 50px;
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron jumbotron-fluid hero" id="hero">
		<div class="container">
				<div class="row">
					<div class="col-6 mb-4">
						<img src="./images/logo.png" class="logo">
						<button id="signup"><span id="signup-icon"></span>Sign Up</button>
      					<button id="signin"><span id="signin-icon"></span>Sign In</button>
						<div class="box">
  							<div class="container-1">
      							<span class="icon"><i class="fa fa-search"></i></span>
      							<input type="search" id="search" placeholder="Search..." />
  							</div>
						</div>
					</div>
				</div><!--row for logo,search, and form -->
			<!-- Here is the carousel, `position:absolute` -->
			<div id="carousel" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#carousel" data-slide-to="0" class="active"></li>
					<li data-target="#carousel" data-slide-to="1"></li>
					<li data-target="#carousel" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner">
					<div class="carousel-item active" style="background-image:url('https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=')"></div>

					<div class="carousel-item" style="background-image:url('http://www.electran.org/publication/transactiontrends/wp-content/uploads/intelligence-growth-1050x700.jpg')">
					</div>
					<div class="carousel-item" style="background-image:url('http://www.globoforce.com/gfblog/wp-content/uploads/2017/02/sprouting-seed.jpg')">
					</div>
				</div>
			</div>
		</div><!-- container for top image carousel -->
	</div>

我尝试调整.carousel-inner css来获取图像的完整大小，但我没有运气。我已经尝试了背景包含和覆盖，但尚未运气

用图片更新

Answer 1

在

中尝试此操作

.carosel-item {
    background-attachment: fixed;
    background-repeat: no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我相信这就是你要找的！干杯

更新：在审核了您的问题之后，您所拥有的是父图像大小的包装器。据我所知，你无法根据背景图片大小调整包装器（父容器）的大小。

您可以做的是使用width:和height:属性设置父包装尺寸，而carosel-item的css将完成其余工作。

祝你好运。

完整图像未显示在旋转木马中

1 个答案: