将图像转换为背景图像

Question

我有在div中获取图像的工作代码，但当我检查它时，它太小了，当我增加它的高度时，它变得不成比例，所以我试图将它放到背景图像中。

我目前所拥有的：

 <div class="carousel-item '; if ($num == 0) {echo ' active ';} echo'" >
    <img class="d-block w-100 h-100" src="'.substr($leaderboard->$topbd_ContentImg,3).'" alt="First slide">
      <div class="carousel-caption d-none d-md-block" style="position:fixed; top: 10%;">
         <h5>'.$leaderboard->$topbd_ContentMenu.'</h5>
         <div class="space-15"></div>
         <p style="font-size:185%;">'.$stringaux.'</p>
         <span class="d-none d-lg-block">
            <div class="space-10"></div>
            <a href="'.$url.'"><img src="static/img/leaderboard-seta.png" /></a>
         </span>
      </div>
 </div>

​

​

我试着把img class="d-block w-100 h-100"，放到div class="carousel-item中作为背景，但没有成功。

我怎么做才能使图像成为插入图像的背景实例？

Answer 1

您希望您的图像作为整个旋转木马项目的背景吗？如果是这样，那么这可能会起作用：

<div class="carousel-item '; if ($num == 0) {echo ' active ';} echo'" style="background-image:url('.substr($leaderboard->$topbd_ContentImg,3).')">
    <div class="carousel-caption d-none d-md-block" style="position:fixed; top: 10%;">
        <h5>'.$leaderboard->$topbd_ContentMenu.'</h5>
        <div class="space-15"></div>
        <p style="font-size:185%;">'.$stringaux.'</p>
        <span class="d-none d-lg-block">
          <div class="space-10"></div>
        <a href="'.$url.'"><img src="static/img/leaderboard-seta.png" /></a>
        </span>
    </div>
</div>

除此之外，您还必须将以下css添加到.carousel-item

.carousel-item{
       background-position: center center;
       background-repeat: no-repeat;
       background-size: cover;
    }

背景位置是可选的，允许您修改如何对齐这些图像，您可能想要阅读此css属性及其选项。