Как получить изображение внутри стола / flex со 100% высотой?

Question

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

Что я хочу

Заголовок состоит из трех частей:

|-------------------|----------------------------------------------|--------------|
||-----------------||                                              ||------------||
||  The site logo  ||    A text message                            ||Another logo||
||-----------------||                                              ||------------||
|-------------------|----------------------------------------------|--------------|

Я хочу, чтобы правила были такими:

• Логотип занимает 40% ширины документа, но не может быть шире, чем 400 пикселей. Это делается с помощью width и max-width. Высота динамическая / авто.
• Столбец текстового сообщения будет настолько широким, насколько это возможно, но не будет иметь фиксированной ширины.
• Другой логотип справа будет иметь высоту столбца 100%, которая основана на высоте логотипа сайта слева.

проблема

Проблема в том, что кажется, что логотип справа не может иметь высоту 100% , не будучи таким большим, как весь документ. Я хочу, чтобы высота столбца была такой, как будто там не было логотипа.

Что я пробовал

Я пробовал решение table ("div с display:table") и решение flex grid (div с display:flex). Последнее упомянутое - это то, с чем я сейчас борюсь.

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
  background: #20262e;
}

.container {
  display: flex; 
  flex-direction: row;
}

.col {
  vertical-align: middle;
  background: hsla(0,0%,100%,.1);
  margin:2px;
  padding:10px;
}

.col.logo {
  width: 40%;
  max-width: 400px;
}

.col.logo img {
  width: 100%;
  height: auto;
}

.col.game-host-logo img {
  width:auto;
  max-width: 100%;
  height: 100%;
}

<div class="container">

  <div class="col logo">
    <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" />
  </div>

  <div class="col live-msg">
    Text Message
  </div>

  <div class="col game-host-logo">
    <img src="https://dromfemman.se/assets/img/ssl_logo.svg" />
  </div>

</div>

Answer 1

Здесь есть две основные проблемы:

1. Фиксированный контейнер или элемент изображения не имеет фиксированной высоты.
2. Не существует фиксированной ширины элемента флекс, содержащего изображение..

---

Проблема № 1: Флекс-контейнер или элемент изображения не имеет фиксированной высоты.

Поскольку на флекс-контейнере или элементе нет фиксированной высотысодержащие изображение (.col.game-host-logo), оба имеют размер в зависимости от размера содержимого (height: auto по умолчанию, согласно спецификации ).

В этом случае содержимое являетсяизображение с натуральными размерами 482 x 565 пикселей.

---

Проблема# 2: На элементе flex, содержащем изображение, фиксированной ширины нет.

Поскольку на элементе, содержащем изображение, фиксированной ширины нет, изображение снова может свободно расширяться до его естественных размеров.

При установке ширины элемента ваша проблема, кажется, решается без нарушения каких-либо вашихтребования.

jsFiddle demo

.container {
  display: flex;
}

.col.logo {
  width: 40%;
  max-width: 400px;
}

.col.logo img {
  max-width: 100%;
  height: auto;
}

.col.live-msg {
  flex: 1;                  /* consumes all free space */
}

.col.game-host-logo {
  width: 20%;               /* new */
}

.col.game-host-logo img {
  max-width: 100%;
}

.col {
  background: hsla(0, 0%, 100%, .1);
  margin: 2px;
  padding: 10px;
}

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
  background: #20262e;
}

<div class="container">

  <div class="col logo">
    <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" />
  </div>

  <div class="col live-msg">
    Text Message
  </div>

  <div class="col game-host-logo">
    <img src="https://dromfemman.se/assets/img/ssl_logo.svg" />
  </div>

</div>