Как сделать картинки внутри блоки отзывчивыми?

Question

Всем привет, вновь вынужден обратиться за советом к магистрам верстки На этот раз дело снова в картинках, хотел сделать небольшую секцию с флекс-элементами - картинка, а справа/слева текст. Но картинки никак не хотят принимать надлежащий вид, если указывать высоту и ширину в html - не помогает, сделал wrapper для картинки, задал максимальную ширину и высоту - тоже не помогает. Понемногу голова закипает, помогите, если не трудно. Как сделать картинки responsive и чтобы они корректно отображались?

.container {
    max-width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width:1170px){
    .container {
        max-width: 970px;
    }
}
@media (max-width:992px){
    .container {
        max-width: 750px;
    }
}
@media (max-width:767px){
    .container {
        max-width: none;
    }
}

.menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid rgb(0, 0, 0);
}

/* --------------------------------------------------- */

.menu__content {
    text-align: center;
    margin: 0 100px;
}

/* --------------------------------------------------- */

.menu__wrapper {
    max-width: 650px;
    max-height: 700px;
    
}

.menu__img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

<section class="section">
    <div class="container">

        <div class="section__header">
            <h3 class="section__title">Меню</h3>
            <p class="section__text">КОФЕ, ЗАВТРАКИ, ВЫПЕЧКА</p>
        </div>

        <div class="menu">
            <div class="menu__item">
                <div class="menu__wrapper">
                    <img class="menu__img" src="https://picsum.photos/2500/4200" >
                </div>
                <div class="menu__content">
                    <h3 class="menu__title">Отличный кофе</h3>
                    <p class="menu__text">Наши бариста приготовят для Вас крипкий и ароматный кофе, чтобы проснуться утром. Или нежный и сладкий для поддержания энергии во время рабочего дня</p>
                </div>
            </div>
            <div class="menu__item">
                <div class="menu__content">
                    <h3 class="menu__title">Вкуснейшие завтраки</h3>
                    <p class="menu__text">Пока бариста будут варить для вас отменный кофе, закажите наши завтраки которые не оставят вас равнадушными на весь день!</p>
                </div>
                <div class="menu__wrapper">
                    <img class="menu__img" src="https://picsum.photos/3600/4500" >
                </div>
            </div>
            <div class="menu__item">
                <div class="menu__wrapper">
                    <img class="menu__img" src="https://picsum.photos/1800/2500" >
                </div>
                <div class="menu__content">
                    <h3 class="menu__title">Свежайшая вепечка</h3>
                    <p class="menu__text">Возьмите с собой или к кофе нашу свежую выпечку. Лучший вариант чтобы сделать перекус во время работы или перерыва!</p>
                </div>
            </div>
        </div>

    </div>
</section>

P.S - странно, но в примере все работает корректно, а у меня картинки вылазят за границы блока, не соблюдают высоту заданную и вообще бунтуют как хотят!

Answer 1

Как и сказал человек выше, нужно было убрать высоту изображения.

Вы хотели такой результат?

.container {
    max-width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width:1170px){
    .container {
        max-width: 970px;
    }
}
@media (max-width:992px){
    .container {
        max-width: 750px;
    }
}
@media (max-width:767px){
    .container {
        max-width: none;
    }
}

.menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid rgb(0, 0, 0);
}

/* --------------------------------------------------- */

.menu__content {
    text-align: center;
    margin: 0 100px;
}

/* --------------------------------------------------- */

.menu__wrapper {
    max-width: 650px;

    
}

.menu__img {
    display: block;
   
    width: 100%;
    object-fit: cover;
}

 <section class="section">
    <div class="container">

        <div class="section__header">
            <h3 class="section__title">Меню</h3>
            <p class="section__text">КОФЕ, ЗАВТРАКИ, ВЫПЕЧКА</p>
        </div>

        <div class="menu">
            <div class="menu__item">
                <div class="menu__wrapper">
                    <img class="menu__img" src="https://picsum.photos/2500/4200" >
                </div>
                <div class="menu__content">
                    <h3 class="menu__title">Отличный кофе</h3>
                    <p class="menu__text">Наши бариста приготовят для Вас крипкий и ароматный кофе, чтобы проснуться утром. Или нежный и сладкий для поддержания энергии во время рабочего дня</p>
                </div>
            </div>
            <div class="menu__item">
                <div class="menu__content">
                    <h3 class="menu__title">Вкуснейшие завтраки</h3>
                    <p class="menu__text">Пока бариста будут варить для вас отменный кофе, закажите наши завтраки которые не оставят вас равнадушными на весь день!</p>
                </div>
                <div class="menu__wrapper">
                    <img class="menu__img" src="https://picsum.photos/3600/4500" >
                </div>
            </div>
            <div class="menu__item">
                <div class="menu__wrapper">
                    <img class="menu__img" src="https://picsum.photos/1800/2500" >
                </div>
                <div class="menu__content">
                    <h3 class="menu__title">Свежайшая вепечка</h3>
                    <p class="menu__text">Возьмите с собой или к кофе нашу свежую выпечку. Лучший вариант чтобы сделать перекус во время работы или перерыва!</p>
                </div>
            </div>
        </div>

    </div>
</section>

БЛОГ НА HUSL

Как сделать картинки внутри блоки отзывчивыми?

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