1

I'm working on a profile-kind-of template – half the page (class="actor-info") should show scrollable text and info about a person and the other half should be filled by the person's portrait picture. The picture should always fill half of the screen – so cropping would be fine.

What I have so far:

  • all ancestor element set to height 100%
  • left column and right column are both flex boxes
  • the image container has the property object-fit: cover;
  • the image container has the property position:fixed;
  • the image hight and width are set to auto

Basically it looks 'as if' it worked right – but when changing the browser window with the image doesn't adopt to the width – so at some point the portrait doesn't fill the height.

What I have so far:

<div class="layout">
    <div class= "actor-info">
        Lorem Ipsum
    </div>
    <div class="actor-portrait">
        <div class="img-container">
            <img src="…">
        </div>
    </div>
</div>

CSS:

html, body, .layout {
    width: 100%;
    height:100%;
}

.actor-portrait,
.actor-info {
    width: 50%;
    height:100%;
}

.actor-portrait .img-container {
    height:100%;
}

.layout {
    align-items: stretch;
    display: flex;
    width: 100%;
    height:100%;
}

.actor-portrait .img-container {
  object-fit: cover;
  position:fixed;
}

.actor-portrait .img-container img {
    width:auto;
    height:auto;
}

I hope somebody has done this / been there before? All pointers appreciated! Thank you!

EDIT: I added a 'wireframe' of what i have – and what i would like to have. The image should 'cover' the red rectangle at all times and would get cropped ba the rectangle (.img-container).

enter image description here

Asons
  • 84,923
  • 12
  • 110
  • 165
tillinberlin
  • 429
  • 4
  • 14

2 Answers2

1

I actually did something similar on a site, but I had a fixed side nav to deal with too: polarlab.anchoragemuseum.org.

I don't remember exactly where I found this code initially, but the trick is the css on the image. I've adjusted the markup and css a bit to accommodate a fixed image.

Here's a fiddle for reference as well.

.banner {
  position: fixed;
  width: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

  .banner__image {
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
    left: -9999px;
    margin: auto;
  }

.text {
  width: 48%;
  float: left;
  font-size: 24px;
  line-height: 34px;
}
<div class="wrapper">
  <section class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sollicitudin turpis, eget pulvinar nulla efficitur non. Sed fermentum est interdum odio lobortis tempor. Mauris euismod molestie sapien sit amet pharetra. Suspendisse condimentum, velit in egestas tristique, augue nunc rutrum odio, sed imperdiet arcu velit ac lectus. Nam tortor magna, venenatis vel diam sit amet, elementum tempor massa. Aenean pretium lectus at enim commodo, ac dignissim dui tempor. Maecenas tincidunt tellus bibendum, porta erat non, pellentesque mauris. Vestibulum lacus nisi, cursus at bibendum ut, pulvinar eu elit. Nulla sodales nunc in quam ornare, non ultrices risus sollicitudin. Nullam gravida non turpis nec tempor. Fusce rhoncus consequat dolor, at euismod metus mattis eget. Maecenas ligula tellus, viverra at mi eu, commodo lacinia enim. Proin auctor sem eu risus malesuada, eu ullamcorper mauris elementum. Morbi commodo mi congue sagittis euismod.</p>

<p>Aliquam cursus interdum diam sed aliquet. Aliquam sollicitudin rutrum diam. Integer viverra, dolor non pulvinar aliquam, enim diam faucibus purus, at suscipit nulla sapien eu augue. Curabitur maximus, nulla vitae faucibus sodales, justo erat suscipit odio, a porttitor turpis ex ut nibh. Curabitur finibus fermentum lectus, vitae pharetra quam convallis in. Nam sollicitudin finibus libero, ut mattis nunc vestibulum nec. Proin gravida dapibus velit.</p>

<p>Ut id augue est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lobortis ac purus fringilla tempus. Morbi nec diam in orci luctus malesuada. Duis consequat tortor tellus, hendrerit interdum metus maximus quis. Nulla non aliquet tortor. Nunc at quam non nibh volutpat pulvinar ut id nisi.</p>

<p>Curabitur ullamcorper dolor eget odio sodales, sit amet consequat est iaculis. Praesent vel consectetur nisi. Quisque tempus nisi quis mollis tincidunt. Pellentesque fermentum mauris enim, id feugiat lorem malesuada ut. Maecenas eleifend lacus a eros hendrerit efficitur. Nunc blandit quam auctor, auctor elit accumsan, dapibus sem. Mauris commodo enim nec ligula congue convallis. Cras cursus cursus felis, quis tempus orci eleifend in.</p>

<p>Mauris rutrum imperdiet ipsum, mollis pretium ipsum maximus id. Vivamus interdum non metus sed imperdiet. Nunc pharetra nisi id nisi convallis, nec gravida felis aliquam. Vestibulum quis molestie purus. Quisque a aliquet magna. Sed gravida quis sem id congue. Donec dolor est, sollicitudin at leo vitae, fringilla tempor mauris. Donec sodales mi vitae sem molestie tincidunt. Fusce ut elit nunc. Cras ullamcorper pharetra augue vitae lobortis. Maecenas hendrerit vulputate suscipit. Ut ut ante elit. Quisque mollis non felis sit amet aliquam. Ut suscipit vel nisi ac lobortis.</p>
  </section>
  <section class="banner">
    <img src="http://www.canvaz.com/portrait/charcoal-1.jpg" class="banner__image">
  </section>
</div>
brouxhaha
  • 4,003
  • 1
  • 19
  • 22
  • Oh wow! This does indeed look very promising! I'll have closer look at it later this evening… – tillinberlin Oct 06 '17 at 17:25
  • I tried your approach in different configurations – but the image was basically always blown up way too much. But thank you for your support anyways – I again learnt quite a few things on the way… – tillinberlin Oct 10 '17 at 10:18
1

As you use predefined width's and height's, you can simplify the code a lot and use background and background-size: cover to accomplish that.

Stack snippet

html, body {
  margin: 0;
}
.layout {
  display: flex;
  height: 100vh;
}
.actor-portrait, .actor-info {
  flex: 0 1 50%;
}
.actor-info {
  overflow: auto;
}
.actor-portrait {
  background: url(http://lorempixel.com/400/400/nature/1/) center no-repeat;
  background-size: cover;
}
<div class="layout">
  <div class="actor-info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
    nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
    Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
    <br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
    Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
    iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
    <br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
    aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
    neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
  </div>
  <div class="actor-portrait">
  </div>
</div>

And if you need to set the image source in the markup, you can do that too.

html, body {
  margin: 0;
}
.layout {
  display: flex;
  height: 100vh;
}
.actor-portrait, .actor-info {
  flex: 0 1 50%;
}
.actor-info {
  overflow: auto;
}
.actor-portrait {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<div class="layout">
  <div class="actor-info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
    nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
    Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
    <br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
    Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
    iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
    <br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
    aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
    neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
  </div>
  <div class="actor-portrait"
       style="background-image: url(http://lorempixel.com/400/400/nature/1/)">
  </div>
</div>

If you still want to use object-fit: cover you can, though it has less browser support than background-size: cover

html, body {
  margin: 0;
}
.layout {
  display: flex;
  height: 100vh;
}
.actor-portrait, .actor-info {
  flex: 0 1 50%;
}
.actor-info {
  overflow: auto;
}
.actor-portrait {
  display: flex;
}
.actor-portrait img {
  object-fit: cover;
  width: 100%;
  min-width: 0;           /*  allow a flex item to be smaller than its content  */
}
<div class="layout">
  <div class="actor-info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
    nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
    Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
    <br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
    Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
    iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
    <br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
    aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
    neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
  </div>
  <div class="actor-portrait">
    <img src="http://lorempixel.com/400/400/nature/1/" alt="">
  </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • 1
    I somehow couldn't get the object-fit:cover working – it always blew the image up too way much. I would have preferred using this instead of background-image for SEO-reasons –– but now at least it does work. I also managed to get rid of the scrollbar that appeared in the middle of the layout. Long story short: thank you for your support! – tillinberlin Oct 10 '17 at 10:21
  • One thing you could do for css background images that kind of "fake" using an actual image would be to actually include `description of image` inside the `.actor-portrait` div. Then use css to visibly hide it (https://www.w3.org/WAI/tutorials/fundamentals/hiding/). This would also solve some accessibility issues. – brouxhaha Oct 10 '17 at 16:43
  • @brouxhaha I use that trick when the outer element doesn't have a given width/height, but use `visibility: hidden` instead of `opacity` ... when need to support IE9-11 – Asons Oct 10 '17 at 16:53