css - 在 CSS 中访问嵌套 内的

Question

我正在尝试填充 carousel-background 图像填充 carousel。但是我无法从 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;

我无法编辑图像。还有没有办法在不拉伸(stretch)的情况下在轮播中填充图像？

Answer 1

您可以为图像添加类。那行代码应该是这样的

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