Как изменить размер изображения внутри ползунка CSS для материализации, чтобы подогнать его под размер

Question

Я использую слайдер Materialize css, но размеры изображений, которые я использую в слайдере, не меняются, чтобы соответствовать размеру, только половина изображения отображается в слайдере.Я попытался несколько правил CSS, чтобы исправить это, но ничего не работает.Проблема только с высотой.

Вот Css, который я пробовал до сих пор:

 .first_image{
    height 100%;
    max-height:100%;
    object-fit: contain;
      }

Вот HTML-код для него:

 <section class="slider">
    <ul class="slides">
          <li>
            <img src="./img/business1.jpg" alt="" class="first_image">
    </li>

</ul>
</section>

Я также добавилкод кодовое здесь , пожалуйста, проверьте его.

Заранее благодарим за любую помощь в этом.

Answer 1

Вы должны установить

.img-responsive {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

<img class="img-responsive" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Image" />