Image fill entire container area that inherits height from other content (no set height)

user_9177940 0
Viewed 104

I have a section with min-height: 100vh. The section in then split into 2 parts, the left part contains a list of links and the right part displays an image which has 100% height.

When hovering over these links the src of the image on the right will change to display an image associated with the link (there is also an image that is displayed by default).

What I am struggling with is how to make the images fill the whole right <picture> container without expanding it in any way? So the image will either be the min height of 100vh OR the same height as the list (if it's over 100vh) I feel like I should be using background-image or something and that this is quite basic, but I'm stumped!

Here's my structure in HTML with inline CSS:

<section style="min-height: 110vh; display: flex">
  <article style="min-width: 50%; border-right: 2px solid black;">
    <ul style="padding: 48px; gap: 32px; display: flex; flex-direction: column">
      <a href="">One</a>
      <a href="">Two</a>
      <a href="">Three</a>
      <a href="">Four</a>
      <a href="">Five</a>
    </ul>
  </article>

  <picture style="flex-grow: 1; object-fit: cover; background-color: aquamarine">
    <img src="https://flif.info/example-images/fish.png" alt="image" style="display: block">
  </picture>
</section>

css html
3 Answers

Replace your picture tag with

<div style="flex-grow:1; object-fit:cover; background:url(https://flif.info/example-images/fish.png) aquamarine no-repeat center center / contain;"></div>

Please let me know if this helps :)

user_84893040

You could define the width in view port vw units. Also, move the object-fit property to the image.

Gif showing dynamic properties

/* margin and padding reset and box-sizing to border-box for all elements */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.section {
  width: 100vw; /* changed to view width so parent takes up all view port width */
  display: flex;
  align-items: center; /* added to center items vertically in flex container */
}

.article {
  width: 50vw; /* added view width to article so it takes up half of view port size */
  border-right: 2px solid black;
}

.listParent {
  padding: 48px;
  gap: 32px;
  display: flex;
  flex-direction: column;
  align-items: center; /* added for vertical alignment of flex items */
}

.pic {
  background-color: aquamarine;
  /* width not needed here */
}

.pic img {  
  /* display block not needed */
  object-fit: cover; /* moved this property under image element */
  width: 50vw; /* added view port size so image only takes up half of view port */
}
<section class="section">
  <article class="article">
    <ul class="listParent">
      <a href="">One</a>
      <a href="">Two</a>
      <a href="">Three</a>
      <a href="">Four</a>
      <a href="">Five</a>
    </ul>
  </article>

  <picture class="pic">
    <img src="https://flif.info/example-images/fish.png" alt="image">
  </picture>
</section>

user_15335920

Solution from CSS grid.

section{
  display: grid; 
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 100vh;
}

article {
  background: #f3f3f3;
  padding: 50px;
}

ul {
  list-style: none;
}

ul li {
  margin-bottom: 20px;
}

picture {
  background-color: aquamarine
}

picture img {
  max-width: 100%;
  display: block;
}
  
<section>
  <article>
    <ul>
      <li><a href="">One</a></li>
      <li><a href="">Two</a></li>
      <li><a href="">Three</a></li>
      <li><a href="">Four</a></li>
      <li><a href="">Five</a></li>
    </ul>
  </article>

  <picture>
    <img src="https://flif.info/example-images/fish.png" alt="image" style="display: block">
  </picture>
</section>

user_37338310
Related