Fitting Flex Divs With Image To “above The Fold”

I have the following layout, made using flex. As you can see I set the image size to fit the div: max-width: 100%; max-height: 100%; But doing this makes it so that the div conta

Solution 1:

the only solution that comes to mind to me is to turn the image into the div's background and then use align-items: stretch on the container.

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

Solution 2:

I'm not exactly sure if I understood your question correctly, but this is what I would do:

.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

I removed your flex-basis values which where causing the container to vertically scroll (not the image) and added some different structure to the first subcontainer to get the positioning right without providing explicit sizes

Solution 3:

Starting from @valepu answer I reach the same result without using background-image CSS property inline. I keep img tag as the code in the question and I used object-fit and object-position CSS properties to make it working in the same way:

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;
}

Here is full snippet in action:

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>