Почему картинки не слушаются границам внешних блоков

Question

Всем привет. Подскажите пожалуйста, почему когда я задаю фиксированную ширину контейнеров для картинок, они не знают размеров которых я задал и отображаются в полном размере.

.slider__item {
    width: 100%;
    max-width: 593px;
    height: auto;
}

        <div class="slider">
            <div class="slider__item">
                <img class="minimized" src="/img/jpeg/проекты/арка.jpg" alt="">
            </div>
            <div class="slider__item">
                <img class="minimized" src="/img/jpeg/проекты/кинотеатр.jpg" alt="">
            </div>
            <div class="slider__item">
                <img class="minimized" src="/img/jpeg/проекты/монумент.jpg" alt="">
            </div>
            <div class="slider__item">
                <img class="minimized " src="/img/jpeg/проекты/новостройка.jpg" alt="">
            </div>
            <div class="slider__item">
                <img class="minimized" src="/img/jpeg/проекты/центральный-фонтан.jpg" alt="">
            </div>
        </div>

Может причина в том что я использую Slick slider. Заранее благодарю)))

Answer 1

Напишите в стилях следующее:

.slider__item img {
  width: 100%;
}

Тогда картинка будет занимать 100% от блока в котором размещена, в вашем случае это будет 593 пикселя, и даже если картинка меньше она будет растягиваться до 593.

Если вы хотите что бы ваша картинка не растягивалась: Напишите вместо width``max-width: 100%. В таком случае если картинка больше чем ширина вашего блока, то ширина картинки станет равна ширине блока, если ширина картинки меньше ширины блока, то ширина картинки не изменится.

Если не хотите что бы картинка уменьшалась ниже какого то предела: напишите вместо width свойство: min-width: с нужным значением.

БЛОГ НА HUSL

Почему картинки не слушаются границам внешних блоков

Ответы (1 шт):