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: 105%;
  width: 73px;
  height: 73px;
}

.subcontainer1.user {
  flex: 1080%;
}

.subcontainer1.time {
  flex: 1010%;
}

.subcontainer2.text {
  flex: 200;
  height: 100%;
}

.subcontainer2.media {
  flex: 100;
  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;
}

.mediaimg {
  height: auto;
  width: auto;
}

<divclass="flexcontainer"><divclass="subcontainer1"><divclass="avatar"><imgsrc="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/></div><divclass="user"><divclass="title">Sue Smith</div><divclass="subtitle">PincoPallino</div></div><divclass="time">
      15th August 2017
    </div></div><divclass="subcontainer2"><divclass="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><divclass="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: 200;
}

.subcontainer2.media {
  flex: 100;
}

.mediaimg {
   max-width: 100%;
   max-height: 100%;
}

<divclass="flexcontainer"><divclass="subcontainer1"><divclass="subsubcontainer"><divclass="avatar"><imgsrc="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/></div><divclass="user"><divclass="title">Sue Smith</div><divclass="subtitle">PincoPallino</div></div></div><divclass="time">
      15th August 2017
    </div></div><divclass="subcontainer2"><divclass="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><divclass="media"><imgsrc="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:

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

CSS:

.subcontainer2.mediaimg {
    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: 105%;
}

.subcontainer1.user {
  flex: 1080%;
}

.subcontainer1.time {
  flex: 1010%;
}

.subcontainer2.text {
  flex: 200;
}

.subcontainer2.media {
  flex: 100;
}

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

<divclass="flexcontainer"><divclass="subcontainer1"><divclass="avatar"><imgsrc="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/></div><divclass="user"><divclass="title">Sue Smith</div><divclass="subtitle">PincoPallino</div></div><divclass="time">
      15th August 2017
    </div></div><divclass="subcontainer2"><divclass="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><divclass="media"><imgsrc="http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg"/></div></div></div>