Question

我正在开发codeigniter，我尝试了更多但却无法使我的图像响应。请帮助我找出解决方案

这是我的标题

<link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.css'); ?>">
  <link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
  <link rel="stylesheet" href="<?php echo base_url('assets/css/style.css'); ?>">
  <link rel="stylesheet" href="<?php echo base_url('assets/css/owl.carousel.css'); ?>">
  <link rel="stylesheet" href="<?php echo base_url('assets/css/style_new.css'); ?>">

我正在使用bootstrap框架来使我的图像响应

这是我的HTML代码

<div class="banner-bg">
  <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-1.jpg'); ?>" class="img-responsive" alt=""></div>
  <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-2.jpg'); ?>" class="img-responsive" alt=""></div>
  <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-3.jpg'); ?>" class="img-responsive" alt=""></div>
  <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-4.jpg'); ?>" class="img-responsive" alt=""></div>
</div>

我也在使用img-responsive类来使其响应但它不起作用。然后我尝试使用css使其响应。这是css。

.banner-bg .banner-bg-item img .img-responsive{
max-width: 100%; 
display:block; 
height: auto;
}

尝试css之后，我没有得到响应式图像。

请帮我找出解决方案。

Answer 1

img标签或类.img-responsive之间有空格，所以请将其删除。

你可以写如下：

.banner-bg .banner-bg-item img.img-responsive{
 }

我认为你把宽度：100％用于图片的响应：

.banner-bg .banner-bg-item img.img-responsive{
max-width: 100%; 
display:block; 
height: auto;
width:100%;
}

Answer 2

您可以像

一样添加列类

<img  src="<?php echo base_url('assets/img/slider-2.jpg'); ?>" class="img-responsive col-xs-12" alt="">

或者您也可以首先添加列类，如

    <div class="col-xs-12">
       <div class="banner-bg">
         <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-1.jpg'); ?>" class="img-responsive" alt=""></div>
        <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-2.jpg'); ?>" class="img-responsive" alt=""></div>
        <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-3.jpg'); ?>" class="img-responsive" alt=""></div>
        <div class="banner-bg-item"><img  src="<?php echo base_url('assets/img/slider-4.jpg'); ?>" class="img-responsive" alt=""></div>
    </div>
</div>

Answer 3

尝试使用!important css属性强制应用css。希望它适合你。

 .banner-bg .banner-bg-item img{
    max-width: 100% !important; 
    }

通过JQuery应用此代码将此代码添加到页脚并确保连接jquery库。

<script>
(function($) {  
$(".banner-bg .banner-bg-item img").css("width","100%", 'important');
})(jQuery);
</script>

JQUERY STYLE PROPERTY

jQuery.style(name, value, priority);

如何使图像响应

3 个答案: