0

Итак, всем снова здравствуйте, все еще воюю с адаптивом. И, к сожалению, снова вынужден спросить совета (а так хотелось понять самому). В общем, есть флекс-контейнер, слева фото, справа заголовок и текст, при уменьшении разрешения экрана заголовок и текст сползают вниз (flex-wrap:wrap), а фото остается сверху. Так вот, как сделать так, чтобы фото отображалось корректно на всю ширину блока? Пытался сделать с помощью min-width - не помогло, если сделать фикс. ширину - при еще более узком экране картинка выглядит ужасно и ломает верстку. Магистры, нужна ваша сила.

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

.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: 50%;  
    margin: 0;
    padding: 0;
}

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

@media (max-width:991px){
   
    .container {
        max-width: 750px;
    }

    .menu__item {
        flex-wrap: wrap;
    }

    .menu__wrapper {
        width: 100%;
    }

    .menu__content {
        width: 100%;
    }

    .menu__img {
        min-width: 100%;
    }
<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 - правда пытался разобраться сам, ведь так лучше усваивается, ведь я учусь. Поэтому, если не сложно, прошу ответить хотя бы с минимальным объяснением, что я делаю не так и почему, спасибо!

1 ответ 1

1

У вас menu__wrapper имеет max-width: 50% , а menu__img находится в нем, поэтому menu__img работает как раз правильно, тянется на все 100% доступной ей ширины. Растяните menu__wrapper и спозиционируйте картинку, как вам надо. Можно к примеру menu__wrapper сделать фиксированной высоты, чтобы картинка не занимала много места, а саму картинку расположить при помощи object-fit: cover

2
  • если я делаю menu__wrapper width: 100%; - то картинка приобретает нежелательные масштабы, желательно чтобы 2 блока menu__wrapper и menu__content были равны по ширине, во имя красоты, конечно. А если я делаю menu__wrapper фикс. высоты, контент заползает на картинку. 28 сен 2021 в 18:49
  • @НикитаГришин Я же вам дал подсказку. Почитайте про object-fit
    – Get-Web
    28 сен 2021 в 19:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.