How to fit an image to “above the fold” without vertical scrollbar

Question

starting from this question I have created the following layout:

html, body {
  height: 100%;
}

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

.left-container {
  flex: 3 0 0;
}

.left-container .header {
  display: flex;
}

.right-container {
  flex: 1 0 0;
}

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

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

(CodePen mirror).

I would like to have that the image on the right should fit the above the fold section, and even have some padding arount it. As you can see it can't and a vertical scrollbar appears.

How can i fit the image to the above the fold?

If I set padding and margin of body to 0 it works and I get rid of the vertical scroll bar. But... isn't this a dirty solution?

Yes, I forgot to say that my solution is adding `padding` and `margin` both to `0` and then adding any padding to `right-container`. But isn't a dirty solution? — smartmouse, Oct 20 '18 at 09:59
@LGSon yes but why we need overflow:hidden ... we shouldn't have any overflow since there is no padding/margin and everything is set to be height:100% — Temani Afif, Oct 20 '18 at 10:01
@smartmouse are you sure setting margin:0 works for you? it's not the case for me (using Chrome) — Temani Afif, Oct 20 '18 at 10:03
Setting `overflow` to `hidden` can't be the solution, because in that case the image is clipped. — smartmouse, Oct 20 '18 at 10:04
@smartmouse You need 2 things, `body { margin: 0 }` ... `.right-container img { display: block;` — Asons, Oct 20 '18 at 10:05
@smartmouse the solution should be `margin:0` to body + `display:block` to image to avoid whitespace, but working only on FF — Temani Afif, Oct 20 '18 at 10:05
@TemaniAfif: it works because I add some padding to `right-container`: Look: https://codepen.io/anon/pen/mzKWZd — smartmouse, Oct 20 '18 at 10:06
@LGSon Ok I see, the image is not loading for me in the snippet so the borken image stuff is creating the issue, it's working fine when the image load — Temani Afif, Oct 20 '18 at 10:08
@LGSon, @TemaniAfif: Yes, the solution is `margin:0` to body + `display:block` to image, and it works on my Chrome. Thank you! — smartmouse, Oct 20 '18 at 10:09
Given that you want the image to match the right-container, do like this instead: https://codepen.io/anon/pen/PyapMZ ... this use `background-image` instead of an `img`, and it has better browser support that `object-fit` — Asons, Oct 20 '18 at 10:09
@LGSon Yes, I know, but I can't use `background-image` property because the content is loaded dinamically and sometime I get video instead of image and `object-fit` should work even with videos (instead at the moment is not working, but this is another issue) — smartmouse, Oct 20 '18 at 10:12
@TemaniAfif Yepp :) ... and OP use `http` instead of `https` for the 2nd image source, hence won't load being non-secured — Asons, Oct 20 '18 at 10:14
I see nobody has answered your question yet if setting `body {margin:0;}` is a dirty solution. No. — Mr Lister, Oct 20 '18 at 10:18
So how to make the same layout working if I want to add some padding/margin to `flexcontainer`? I would like to use different background colors for body and for the main cointainer of the page. — smartmouse, Oct 20 '18 at 11:24

How to fit an image to “above the fold” without vertical scrollbar

0 Answers0