html - 如何使图像响应

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{
 }

我想你把 width:100% for image 放在 responsive:

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