无法在 codeigniter 中自定义轮播引导 css答案

【问题标题】：Can't custom carousel bootstrap css in codeigniter无法在 codeigniter 中自定义轮播引导 css
【发布时间】：2020-04-03 06:39:57
【问题描述】：

我有一个显示图像幻灯片的轮播。但问题是这个图像有不同的高度。所以我需要改变图像的高度而不拉伸它。

这是我的代码：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- css bs-->
<link type="text/css" rel="stylesheet" href="<?php echo base_url('/assets/css/bootstrap.min.css'); ?>">
<link type="text/css" rel="stylesheet" href="<?php echo base_url('/assets/css/custom.css'); ?>">
<!-- css FA -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url('/assets/css/all.css');?>">



<title>Document</title>


<!-- Javascript -->
<script src="<?php echo base_url('/assets/js/jquery-3.4.1.min.js');?>"></script>
<script src="<?php echo base_url('/assets/js/bootstrap.bundle.min.js');?>"></script>  
</head>
<body>

<div class="container">

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="w-100" src="<?php echo base_url().'gambar/'.$slider[0]['gambar'];?>" alt="First slide" >
      <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
    </div>
    <div class="carousel-item">
      <img class="w-100" src="<?php echo base_url().'gambar/'.$slider[1]['gambar'];?>" alt="Second slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

    </div>
    </div>
    </body>
</html>

我意识到的另一个问题是我无法更改任何引导 css 值。我不知道，但这就像我的引导程序不会改变任何东西。

【问题讨论】：

您应该使用具有相同高度和宽度的图像
您必须做出一些假设，要么给图像指定最大高度并剪切长图像，要么可以拉伸短图像。最好是具有相同高度的图像。不确定是否有任何其他替代方法可以修复不同高度的图像

标签： php css codeigniter bootstrap-4

【解决方案1】：

您可以使用图像上的 CSS 属性 object-fit: cover 来实现此目的。 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

将以下内容添加到您的自定义 CSS：

.carousel-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

您也可以从<img> 中删除w-100 类。

需要注意的是，图像可能会被水平或垂直裁剪，具体取决于纵横比。

【讨论】：