Question

我正在使用bootstrap 4和codeigniter，由于某种原因，bootstrap carousal width无法正常工作。实际上图像宽度为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

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

.w-100 {
    width: 100%;
}

OR

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

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

Bootstrap 4 carousal没有使图像全宽

1 个答案: