我如何让 img-fluid 在 Bootstrap Carousel 中工作？

Question

I've been trying to make my images within my carousel responsive by adding the img-fluid tag to them but nothing is working. I've tried using.important. I've tried using block. I am not sure what is preventing the change? Any suggestions?

.container{
        
        font-size: 32px;
        font-family: 'Inter', sans-serif;
        position:relative;
        top: 150px;
        right:-15px;
        font-weight: 300;
        width: 1440px;
        letter-spacing: 2px;
        
      
  }
  
 
  
  .item{
      
      
        float:right;
      
     
      
  }
  


<div class="container">
 

<div class="carousel-inner">
  <div class="item active">
    <img class="image img-fluid" src="images/image-tanya.jpg" alt="Tanya" style="height:648px; width:648px;" ><div class="carousel-caption">  
  </div>
    </div>      

  <div class="item ">
    <img class="image img-fluid" src="images/image-john.jpg" alt="John" style="height:648px; width:648px;">
  </div>

Answer 1

style="height:648px; width:648px;" is the culprit

The styles defined by the img-fluid class are being overwritten by the inline styles on the img tags in the the HTML. Inline styles always take precedence over those defined in style sheets. Try removing those inline styles and see what happens:)