Bootstrap 4 carousal没有使图像全宽

Question

我使用引导程序4和codeigniter，由于某些原因bootstrap carousal宽度不起作用。实际上图像是1140像素宽度

问题如何获取bootstrap carousal中的图像以显示其全宽和高度？我一起使用codeigniter和bootstrap。

如图图像的图像不充分宽度低于转盘

<div id="carouselExampleIndicators<?php echo $module; ?>" class="carousel slide" data-ride="carousel"> 

    <ol class="carousel-indicators"> 
    <?php foreach ($banners as $i => $banner) { ?> 
     <li data-target="#carouselExampleIndicators<?php echo $module; ?>" data-slide-to="<?php echo $i; ?>"<?php echo !$i ? ' class="active"' : ''; ?>></li> 
    <?php } ?> 

    </ol> 

    <div class="carousel-inner"> 

    <?php foreach ($banners as $i => $banner) { ?> 
     <div class="carousel-item <?php echo !$i ? ' active' : ''; ?>"> 
      <img class="w-100" src="<?php echo $banner['image']; ?>" alt=""> 
     </div> 
    <?php } ?> 

    </div> 

    <?php if (count($banners) > 1) { ?> 
    <a class="carousel-control-prev" href="#carouselExampleIndicators<?php echo $module; ?>" 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<?php echo $module; ?>" role="button" data-slide="next"> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    <?php } ?> 

</div> 

控制器

<?php 

class Slideshow extends MX_Controller { 

    public function index($setting = array()) { 

     static $module = 0; 

     $this->load->model('catalog/tool/image_model'); 

     $data['width'] = $setting['width']; 
     $data['height'] = $setting['height']; 

     $results = $this->getBanner($setting['banner_id']); 

     $data['banners'] = array(); 

     foreach ($results as $result) { 
      $data['banners'][] = array(
       'image' => $this->image_model->resize($result['image'], $setting['width'], $setting['height']) 
      ); 
     } 

     $data['module'] = $module++; 

     if (file_exists(config_item('catalog_template_path') . $this->site->get('config_theme') . '/template/module/slideshow_view.php')) { 
      $this->load->view($this->site->get('config_theme') .'/template/module/slideshow_view', $data); 
     } else { 
      $this->load->view('default/template/module/slideshow_view', $data); 
     } 
    } 

    public function getBanner($banner_id) { 
     $this->db->select('*'); 
     $this->db->from($this->db->dbprefix . 'banner'); 
     $this->db->join($this->db->dbprefix . 'banner_image', 'banner_image.banner_id = banner.banner_id', 'LEFT'); 
     $this->db->where('banner_image.banner_id', $banner_id); 
     $query = $this->db->get(); 

     return $query->result_array(); 
    } 
} 

Answer 1

设置宽度= 100％为您w-100类

.w-100 { 
    width: 100%; 
} 

OR

添加style="width: 100%"到您的img标签

<img class="w-100" src="<?php echo $banner['image']; ?>" alt="" style="width: 100%">