Блог

Я пытался сделать мои изображения в моей карусели отзывчивыми, добавив к ним тег img-fluid, но ничего не работает. Я пробовал использовать !важно. Я пробовал использовать block. Я не уверен, что мешает изменению. Есть предложения?

 .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>
 

style="height:648px; width:648px;" виновник

Стили, определенные img-fluid классом, перезаписываются встроенными стилями в img тегах в HTML. Встроенные стили всегда имеют приоритет над теми, которые определены в таблицах стилей. Попробуйте удалить эти встроенные стили и посмотреть, что произойдет 🙂