Как ограничить картинку размерами родителя, при относительных размерах flex-родителя?

Question

Делаю горизонтальное меню в шапке и отчего то картинка ведущая на главную выводится в своем полном размере( Макс-хай 100% лишь растягивают менюшку(

Я хочу что бы логотип был высотой с менюшку. На странице эбаут у меня получилось так сделать с одну строку, на странице exp с одноименным css я пытаюсь отказаться от фиксированного размера меню, что бы его высота определялась количеством строк кнопок. Архив: https://drive.google.com/file/d/1aplZoRqspLx58snAnLWYRU-2NG9INCb2/view?usp=share_link Тому кто исправит код на правильный с комментариями - скромный донат. По правильному коду мне будет конечно легче разобраться с темой хтмл-цсс.

Ссылка на макет в котором видно как должно быть https://www.figma.com/file/DbFZjw0g7QL9Z6hAz1DE3f/warl0?node-id=0%3A1&t=yav6NY9wLmDTMryE-1

Неудачная попытка сделать меню без фиксированой высоты:

    <!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Protoblock</title>
    <link rel="stylesheet" href="styles/exp.css">
</head>

<body>
  <div class="viewbox">
    <header>
      <div class="header-box flex">
      <a href="index.html" class="header-logo">
        <img class="logo" src="img/logo.png">
      </a>
      <nav class>
            <ul class="list-reset menu top-menu">

            <li class="menu-item menu__item-li">
                <a class="menu_item" href="#">
                  ПУБЛИКАЦИИ ↓
                </a>
            </li>
            <li class="menu__item-li top-menu_selected">
                <a href="#" class="menu_item">
                  ОБО МНЕ
                </a>
            </li>
            <li class="menu__item-li">
                <a href="#" class="menu_item">
                  ДЕЯТЕЛЬНОСТЬ
                </a>
            </li>
            <li class="menu__item-li">
                <a href="#" class="menu_item">
                  ПОРТФОЛИО
                </a>
            </li>
            <li class="menu__item-li">
                <a href="#" class="menu_item">
                  КОНТАКТНАЯ ИНФОРМАЦИЯ
                </a>
            </li>
          </ul>
      </nav>
    </div>
  </header>


html  {
    box-sizing: border-box;
}

*,
*::before,
*::after    {
    box-sizing: inherit;
}

body    {
    width: 100%; 
    margin: 0;
    font-family: PT sans;
}



.header-box {
  align-items: center;
  background-color: #E8E8E8;
}

.header-logo  {
  margin-right: auto;
}

.logo  {
  max-height: 100%;
}

.menu  {
  /* position: absolute; */
  display: flex;
  align-items: center;
}

.menu-item  {
  padding: calc(0.5rem + 1.3vw) calc(0.1rem + 1.4vw) calc(0.5rem + 1.3vw) calc(0.05rem + 0.5vw);
}

/* globe */

.flex {
  display: flex;
}

/* .list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
} */

.link-reset {
  color: inherit;
  text-decoration: none;
}

Answer 1

Во-первых, когда вас просят предоставить ваш код, то выкладывать его нужно здесь, чтобы люди могли живьём его видеть (некоторые из нас знаете ли умеют читать), как есть, а не упакованные архивы невесть где. Во-вторых, у вас там такая каша из абы чего, что мозг сломать можно. Ради интереса, чтобы всё-таки понять что вам нужно, я убрал весь ваш CSS и написал необходимый минимум как должно быть. И, может это и есть ответ на ваш вопрос, добавил одно единственное правило для адаптивности изображения img.cart-ava и всё прекрасно заработало.

Однако, исходя из вашей текущей html-вёрстки и постановки вопроса и превьюшки из поста одно расходится с другим. В частности блок .cart содержащий изображение и вступление. Текстовая часть принципиально никак не может растягиваться на всю ширину экрана, а согласно .flex будет одинаковой шириной с изображением.

Проделал всю эту работу за вас и потратил кучу времени лишь для того, чтобы, вы понимали как не надо делать в вёрстке, и как надо делать, когда вас просят предоставить код. И, вдруг кто-нибудь глядя на уже очищенную от шлака вёрстку всё ещё захочет вам помочь. У меня уже нет на это настроения.

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
  font-family: sans-serif;
}

.viewbox {
    display: flex;
}

.cart {
    display: flex;
    flex-direction: column;
    position: relative;
  background-color: aliceblue;
}

img.cart-ava {
    width: 100%;
    height: auto;
}


.menu.index-menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #E8E8E8;
}

.menu_item.cart__menu__item a {
    background-color: #F4F4F4;
}
.menu__item a {
    line-height: 5rem;
    white-space: nowrap;
    display: inline-block;
    padding: 0 10px;
}

<div class="viewbox">
    <div class="cart">
        <div class="cart-pic">
            <img class="cart-ava" src="https://i.imgur.com/Oc61Mw9.jpg">
        </div>
        <div class="cart-text">
            <p class="cart-pre">
                Фрактальный авангардист, экспериментатор, а так же тот еще выдумщик.<br>
                Да и в принципе, забавный персонаж.
            </p>
            <h1 class="cart-title">Варло</h1>
            <p class="cart-p">
                Более десяти лет занимаюсь культурной деятельностью в различных ее проявлениях.
            </p>
            <p class="cart-p">
                Я полон идей и проектов по направлению ко всеобщему благу, но в данный момент остро нуждаюсь в
                финансовом росте.
                Поэтому активно изучаю дизайн и веб-разработку.
            </p>
            <p class="cart-p">
                Как всегда, открыт к сотрудничеству и взаимодействию.
                Ну и конечно, горю желанием обрести коммерческих заказов.
            </p>
        </div>
    </div>
    <nav>
        <ul class="menu index-menu">
            <!-- внутри ul всегда идет список li потом только ссылка a -->
            <li class="menu__item cart__menu__item">
                <a href="#">
                    ПУБЛИКАЦИИ ↓
                </a>
            </li>
            <li class="menu__item">
                <a href="about.html">
                    ОБО МНЕ
                </a>
            </li>
            <li class="menu__item">
                <a href="#">
                    ДЕЯТЕЛЬНОСТЬ
                </a>
            </li>
            <li class="menu__item">
                <a href="#">
                    ПОРТФОЛИО
                </a>
            </li>
            <li class="menu__item">
                <a href="#">
                    КОНТАКТНАЯ ИНФОРМАЦИЯ
                </a>
            </li>
        </ul>
    </nav>
</div>


<div class="public">
    <div class="public-conteiner">
        <div class="post">
            <time class="post-data">2022.11.09</time>
            <h2>Лента публикаций ниже первого экрана</h2>

            <p>
                А ведь реально уже на чтото становится похоже. Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Soluta minima ullam cum tenetur laboriosam sapiente quis? Eligendi animi tempora adipisci
                neque. Est minima at consectetur blanditiis natus expedita dignissimos necessitatibus.
            </p>
        </div>
    </div>
</div>

P.S. я там ещё попутно убрал "избыточную" ерунду в меню в виде класса к тегу a class="menu_item"

<li class="menu__item">
   <a href="about.html" class="menu_item">
      ОБО МНЕ
   </a>
</li>

БЛОГ НА HUSL

Как ограничить картинку размерами родителя, при относительных размерах flex-родителя?

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