Вопрос по flexbox, css, css3 – Просто сделал, если вы проверите в Firefox и Edge, вы увидите, что он по-прежнему не работает

3

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

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

Похоже, что это работает в Chrome, но не в Edge / IE / Firefox. Я не смог протестировать Safari, так как у меня нет устройства iOS, поэтому я был бы признателен, если бы кто-то мог поделиться тем, как / если оно работает там.

Это не должно бытьflexbox решение, хотя я ожидаю CSS, то естьбез сценария.

редактировать

Высота данного текста может быть динамической и основываться на его содержании, поэтому предопределенный200px было просто дать ему высоту,JSFiddle demo, установить высоту .

JSFiddle demo, основанная на содержании высота

Фрагмент стека

.container {
  display: inline-flex;
}

.img img {
  height:100%;
}

.text {
  background: lightblue;
}

.text-content {
  width: 200px;
}
<div class="container">
  <div class="img">
    <img src="http://placehold.it/160x90">
  </div>
  <div class="text">
    <div class="text-content">
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
    </div>
  </div>
</div>

Ожидаемый результат (жестко запрограммирован)

.container {
  display: inline-flex;
}

.img img {
  height:100%;
  width: 355px;            /*  force correct width  */
}

.text {
  background: lightblue;
}

.text-content {
  width: 200px;
}
<div class="container">
  <div class="img">
    <img src="http://placehold.it/160x90">
  </div>
  <div class="text">
    <div class="text-content">
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
    </div>
  </div>
</div>

@vals, re: Oriol FYI ...stackoverflow.com/users/1529630/oriol Michael_B
К сожалению, Ориоль больше не посещает С.О. (А жаль) vals
Да, ваша новая скрипка работает локально, я просто не могу понять, что происходит. Я разместил сообщение не для того, чтобы узнать, может ли кто-то определить причину такого поведения. vals
@Michael_B Спасибо за примечание LGSon
@LGSon, мне больше нечего добавить к уже опубликованным ответам и комментариям. Ну, может быть, одно: на первый взгляд случайное поведение изображений во флекс-элементах и ​​флекс-контейнерах довольно раздражает. Michael_B

Ваш Ответ

1   ответ
3

Вы должны определить высоту на.container уровень. Следующий CSS будет работать для всех браузеров, которые вы упомянули выше:

.container {
    display: inline-flex;
    height: 200px;
}

.img {
    height: 100%;
}
.img img {
    height:100%;
}

.text {
    background: lightblue;
}

.text-content {
    width: 200px;
}

ОБНОВИТЬ

Я оставлю старый ответ на всякий случай, но это, кажется, работаетcodepen, Я пробовал с разным количеством строк и размеров текста.

.container {
  display: inline-flex;
}

.img img {
  height:100%;
}

.text {
  background: lightblue;
}
@LGSon Я обновил ответ, можешь проверить кодовую ручку? Tunçel Mert
Просто сделал, если вы проверите в Firefox и Edge, вы увидите, что он по-прежнему не работает LGSon
Спасибо, проголосовал. Сделано небольшое редактирование вопроса, где высота может быть динамической и основанной на содержании текстового элемента LGSon

Похожие вопросы