Question

我正在尝试填充旋转木马背景图片填充旋转木马。但是我无法从css访问标签。

<div id="carouselSlider" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <!-- data-slide-to part -->
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-background"><img src="img/portfolio/fullsize/1.jpg"></div>
      <div class="carousel-container">
        <div class="carousel-caption">
          <h2>We are xyz</h2>
          <p>We help you to blah blah blah!</p>
          <a href="#getstarted" class="btn btn-primary scrollto">Get Started</a>
        </div> <!--carousel-content-->
      </div> <!--carousel-container-->
    </div> <!--carousel-item-->

  <div class="carousel-item">
    <!-- similar content with <img>-->
  </div> <!--carousel-item-->

  <div class="carousel-item">
    <!-- similar content with <img>-->
   </div> <!--carousel-item-->

  </div> <!--carousel-inner-->
  <a class="carousel-control-prev" href="#carouselSlider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselSlider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div> <!--carousel-->

CSS文件：

#carouselSlider .carousel-inner .carousel-item .carousel-background img{
width: 100%;
height:400px;

}

我无法编辑图片。还有一种方法可以在不拉伸的情况下在旋转木马中填充图像吗？

Answer 1

您可以向图像添加类。那行代码看起来应该是

<div class="carousel-background"><img class="whateveryouwant" src="img/portfolio/fullsize/1.jpg"></div>

Answer 2

您尝试使用类导航嵌套结构，但这不是它的工作原理。因为您的carouselSlider div中只有一个图像，所以您可以使用以下方法访问它：

#carouselSlider img {<your css here>}

但是当你有更多的图像时，这可能会破裂。如果你可以改变那个HTML，你应该把你的img或id的类添加到其中一个内部div并直接访问它。

要避免图像被拉伸，请查看“background-size”CSS属性。 “封面”或“包含”应该为你做。

访问CSS中嵌套<div>内的<img/>

2 个答案: