Подгонка гибких элементов с изображением «над сгибом»

Question

У меня есть следующий макет, сделанный с использованием flex.

.flexcontainer {
  display: flex;
  flex-direction: column;
}

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

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

.subcontainer1 .avatar {
  flex: 1 0 5%;
}

.subcontainer1 .user {
  flex: 1 0 80%;
}

.subcontainer1 .time {
  flex: 1 0 10%;
}

.subcontainer2 .text {
  flex: 2 0 0;
}

.subcontainer2 .media {
  flex: 1 0 0;
}

.media img {
   max-width: 100%;
   max-height: 100%;
}

<div class="flexcontainer">
  <div class="subcontainer1">
    <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
    <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">
      <img src="https://pbs.twimg.com/media/Doc_24PWsAAnx5w.jpg"/>
    </div>
  </div>
</div>

Как вы можете видеть, я устанавливаю размер изображения в соответствии с div:

max-width: 100%;
max-height: 100%;

Но при этом получается, что divсодержащее изображение вырастает за пределы экрана вместо того, чтобы останавливаться в разделе «выше сгиба» моей страницы (другими словами, что пользователи видят на первом экране).

Если вы запускаете фрагмент или открываете мой Ссылка на CodePen , в обоих случаях вы можете видеть, что изображение помещается внутри div, но div не помещается в вышеупомянутом разделе сгиба.

Я бы хотел, чтобы div неперейдите под экран и изображение, чтобы иметь размер div, а не наоборот.

Поскольку изображение загружается динамически, возможно ли это сделать с помощью HTML и CSS?

Answer 1

единственное решение, которое приходит мне в голову, это превратить изображение в фон div и затем использовать align-items: stretch на контейнере.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  margin-left: 2px;
  margin-right: 2px;
}

.flexcontainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

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

.subcontainer2 {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.subcontainer1 .avatar {
  flex: 1 0 5%;
  width: 73px;
  height: 73px;
}

.subcontainer1 .user {
  flex: 1 0 80%;
}

.subcontainer1 .time {
  flex: 1 0 10%;
}

.subcontainer2 .text {
  flex: 2 0 0;
  height: 100%;
}

.subcontainer2 .media {
  flex: 1 0 0;
  height: 100%;
  width: 30%;
  background-image: url('http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

.media img {
  height: auto;
  width: auto;
}

<div class="flexcontainer">
  <div class="subcontainer1">
    <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
    <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">

    </div>
  </div>
</div>

https://codepen.io/valepu/pen/WawzPz

Answer 2

Начиная с ответа @valepu, я достигаю того же результата, не используя background-image встроенное свойство CSS.Я сохранил тег img в качестве кода в вопросе, и я использовал свойства CSS object-fit и object-position, чтобы он работал одинаково:

HTML:

<div class="media">
  <img src="http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg"/>
</div>

CSS:

.subcontainer2 .media img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top;
}

Вот полный фрагмент в действии:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flexcontainer {
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

.subcontainer2 {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.subcontainer1 .avatar {
  flex: 1 0 5%;
}

.subcontainer1 .user {
  flex: 1 0 80%;
}

.subcontainer1 .time {
  flex: 1 0 10%;
}

.subcontainer2 .text {
  flex: 2 0 0;
}

.subcontainer2 .media {
  flex: 1 0 0;
}

.subcontainer2 .media img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: top;
}

<div class="flexcontainer">
  <div class="subcontainer1">
    <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
    <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">
      <img src="http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg"/>
    </div>
  </div>
</div>

Answer 3

Я не совсем уверен, правильно ли я понял ваш вопрос, но вот что я бы сделал:

.flexcontainer {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

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

.subcontainer1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
}

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

.subcontainer2 .text {
  flex: 2 0 0;
}

.subcontainer2 .media {
  flex: 1 0 0;
}

.media img {
   max-width: 100%;
   max-height: 100%;
}

<div class="flexcontainer">
  <div class="subcontainer1">
   <div class="subsubcontainer">
      <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
      <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    </div>
   
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">
      <img src="https://pbs.twimg.com/media/Doc_24PWsAAnx5w.jpg"/>
    </div>
  </div>
</div>

CodePen Link

Я удалил ваши значения flex-based, которые вызывали вертикальную прокрутку контейнера (а неimage) и добавили некоторую другую структуру к первому подконтейнеру, чтобы получить правильное позиционирование без предоставления явных размеров