Question 268588 in Html Question posted in
Some basic documentation can be found here.

Html – Make img fill entire height

I’m trying to get the image on the left to take up the entire height no matter how much content is on the right (see screenshot).

enter image description here

You’ll have to make the viewport around 850px or less to see what I’m talking about.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  max-height: 100%;
  width: auto;
  flex-basis: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
}

.item-1-direct-child {
  min-height: 100%;
}

img {
  max-height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  object-fit: cover;
  min-height: 187px;
}

.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container>a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
<div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child">
      <img src="https://picsum.photos/200/300" />
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
Tags:

4

Answers


  1. 0

    You have the correct CSS, but you are applying it wrong.

    Images can either be set as an <img> tag or as a CSS background-image. Your CSS is trying to set a background image for an image element, which makes no sense.

    Instead, remove the <img> tag and the CSS for it. Just use this CSS

    .side-image-bg {
  background-image: url('https://picsum.photos/200/300');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

    And add that class to the sidebar element.

    .flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  max-height: 100%;
  width: auto;
  flex-basis: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
}

.item-1-direct-child {
  min-height: 100%;
}

.side-image-bg {
  background-image: url('https://picsum.photos/200/300');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container > a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
    <div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child side-image-bg">
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>

    As a side note, you have this code:

    <a>
  <button>
  Button
  </button>
</a>

    Which is a button inside of a link. This is invalid HTML, and it makes no sense. An interactive element cannot be inside of another interactive element. An <a> is for linking to another document, and a <button> is for either doing some action or submitting a form. You need to pick which one needs to happen here.

    Login or Signup to reply.
  2. 0
    • Kill height: 100% from the item.
    • Change .item-1-direct-child { min-height: 100%; } to height: 100%
    • Change img { max-height: 100%; } to height: 100%

    https://jsfiddle.net/dgrogan/sqfet3zj/

    Login or Signup to reply.
  3. 0

    You have a lot of unnecessary percentage lengths and other code.

    Also, it’s not clear what you’re aiming for with all those max-width and max-height rules.

    So, to keep it simple, I’ve just simplified the code and provided a solution the problem.

    You may need to make modifications to achieve your overall goal.

    jsFiddle

    .flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  /* width: 100%; */
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  /* max-height: 100%; */
  /* width: auto; */
  /* flex-basis: 25%; */
  /* flex-grow: 0; */
  /* max-width: 25%; */
  background-color: lightblue;
  display: flex; /* sets align-items: stretch default */  
  flex: 0 0 25%; 
}

.item-1-direct-child {
  /* min-height: 100%; */
  display: flex; /* sets align-items: stretch default */
  flex: 1;
}

img {
  flex: 1;
  height: auto;
  object-fit: contain;
  /* max-height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  min-height: 187px; */
}

.item-2 {
  /* flex-basis: 75%; */
  /* flex-grow: 0; */
  /*  max-width: 75%; */
  flex: 0 0 75%; /* NEW */
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container > a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
    <div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child">
      <img src="https://picsum.photos/200/300" />
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    I made some changes to the CSS:
    changed .item-1 to create a container to contain the image and in the .item-1-direct-child, height: 100%; and added flex to stretch its children vertically.

    .flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  width: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
  position: relative;
  overflow: hidden;
}

.item-1-direct-child {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
}

.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container > a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}
    <div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child">
      <img src="https://picsum.photos/200/300" />
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search