Search code examples
cssflexboxcoverobject-fit

CSS: how to display an image object-fit:cover in a responsive 50% width context?

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

Solution

  • 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>