Question

我正在使用引导程序学习HTML和CSS。

我正在研究轮播示例代码。但是像图像一样，盒子中还留有一个空格。

如何在全屏显示的情况下在无空格的情况下填充框？

这是轮播标记：

<div class="col-lg-6 col-sm-6 portfolio-item">
    <div class="card h-100">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
              <!-- Slide One - Set the background image for this slide in the line below -->
              <div class="carousel-item active">
                <div class="carousel-caption d-none d-md-block">
                  <img src="image/image-1.jpg" style="width: 100%; height: 100%;">
                </div>
              </div>
              <!-- Slide Two - Set the background image for this slide in the line below -->
              <div class="carousel-item">
                <div class="carousel-caption d-none d-md-block">
                  <img src="image/image-2.jpg" style="width: 100%">
                </div>
              </div>
              <!-- Slide Three - Set the background image for this slide in the line below -->
              <div class="carousel-item">
                <div class="carousel-caption d-none d-md-block">
                  <img src="image/image-3.jpg" style="width: 100%; height: 100%;">
                </div>
              </div>
            </div>
          </div>
    </div>
  </div>

我上传CSS代码

1.css

`body {
      background-image: url("../image/bgimage.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      }
.carousel-item {
  height: 44vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

++ other.css同一项目

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

Answer 1

您可以为所有滑块图像添加CSS

#carouselExampleIndicators .carousel-inner .carousel-item img{
   height: auto;
   max-width: 100%;
    display:block;
   width: 100%;
}

Answer 2

您是否保证所有幻灯片图像的大小始终相同？如果不是（或不确定），我会让幻灯片图像作为.carousel-item div的背景出现：

#carouselExampleIndicators .carousel-inner .carousel-item {
  background: url(image/image-1.jpg) no-repeat center center; // update url for each slide
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; // cover ensures that there's no white space
}

如何将图像放在没有空间的盒子中

2 个答案: