CODEWITHSUNDEEP
htmlcssflexbox
Boris Kozarac
Boris Kozarac

Reputation: 635

Set image to always be full height in flex column

I have two columns set to 50%, left with text and right with image that should fill whole column vertically. The problem is that when text is a little bigger, there is a gap below the image. Is it possible to always have the image occupy the full height (but in same ratio)? For example, the image could get wider than its column, in that case I could just set overflow hidden. 

.flex {
  display: flex;
  border: 3px solid black;
  padding: 10px;
}

.col {
  border: 1px dashed #aaa;
}

.left {
  padding: 30px;
}
<div class="flex">
  <div class="col left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
      ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
      quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
    </p>
  </div>
  <div class="col right">
    <img src="http://placehold.it/550x250" alt="">
  </div>
</div>

Upvotes: 0

Views: 87

Answers (2)

David Chelliah
David Chelliah

Reputation: 1349

You have to set the following CSS properties to the image:

height: 100%;
width: auto;


.flex {
  display: flex;
  border: 3px solid black;
  padding: 10px;
}
.col {
  border: 1px dashed #aaa;
  overflow-x: hidden;
}
.left {
  padding: 30px;
}
.right img {
  height: 100%;
  width: auto;
}
<div class="flex">
  <div class="col left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
      ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
      quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
    </p>
  </div>
  <div class="col right">
    <img src="http://placehold.it/550x250" alt="">
  </div>
</div>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371221

The quickest way to get the image to fill the vertical height of the container would be to make the parent a flex container. This automatically applies align-items: stretch to the children (in this case, the image).

.right { 
  display: flex; 
}

From that point, you could use various methods to set the correct aspect ratio to the image. You could use percentage height, if you have defined heights on the parent / ancestors.

Or you could use the object-fit property.

.flex {
  display: flex;
  border: 3px solid black;
  padding: 10px;
}
.col {
  border: 1px dashed #aaa;
}
.left {
  padding: 30px;
}
.right {
  display: flex;
}
img {
  object-fit: cover;
}
<div class="flex">
  <div class="col left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
      ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
      quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
    </p>
  </div>
  <div class="col right">
    <img src="http://placehold.it/550x250" alt="">
  </div>
</div>

Note that object-fit is not natively supported in Internet Explorer. For more details and a workaround see: Why isn't object-fit working in flexbox?

Upvotes: 1

Related Questions