Fitting flex divs with image to “above the fold”

Question

I have the following layout, made using 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>

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 containing the image grows off screen instead of stopping in the "above the fold" section of my page (in other words what the users see in the first screen).

If you run the snippet or open my CodePen link, you can see in both cases that the image fits inside the div, but the div doesn't fit in the above the fold section.

I would like to have the div to not go below the screen and the image to have the size of the div rather than the other way around.

Since the image is dinamically loaded, is it possible to do this using HTML and CSS?

Using max-height: 100vh; will get you a bit of the way, but it will not fully work if the image is not at the top of the page, then you will need javascript. — Ogge, Oct 04 '18 at 09:08
@Ogge I tried your hint and put the image at the top, but it doesn't work anyway. — smartmouse, Oct 04 '18 at 09:23

zukye · Answer 1 · 2018-10-04T09:42:18.450

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

I see your solution but it seems to be the same. (please double check your link, it is broken) — smartmouse, Oct 04 '18 at 09:22
You are right I just corrected it and provided the snipped directly here. Sorry for the struggles, I'm new to SO — zukye, Oct 04 '18 at 09:39
Thank you for your help, but your solution doesn't work... the vertical scrollbar still appears. — smartmouse, Oct 04 '18 at 10:04

valepu · Accepted Answer · 2018-10-04T10:33:14.867

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

I like your solution, but since in my case the image is dinamically loaded, I should use Javascript to change `background-image` property in the CSS... — smartmouse, Oct 04 '18 at 10:06

score 1 · Answer 3 · answered Oct 10 '18 at 08:37

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>

Fitting flex divs with image to “above the fold”

3 Answers3

Linked