How to keep two columns the same height with image?

Question

We have a two column layout where image is on one side with text on the other. We want the image to be the same height as the content. We are having an issue when the text column reaches a certain height, then it will not make the image go full height. Although not added, this .flex__wrapper is surrounded by an outer <div class="container"> element so that we can handle larger screens where we may want to limit the width.

How can we achieve this? Our current solution uses flexbox, but we have also tried the following solutions but none resolves the problem.

Goal:

As the right column containing the text increases in height, i want the image to also take up the same amount of height.

Solutions we tried, but they didn't work. They seem to work well with text and text, but not text and image.

.flex__wrapper {
 display: flex;
 position: relative;
 align-items: center;
 background-color: #eee;
}

[class*=col--] {
 box-sizing: border-box;
}

.col--m-s-12 {
width: 100%;
}

.col--t-s-6 {
width: 50%; 
}

img {
display: block;
height: auto;
}

<div class="flex__wrapper">
  <div class="col--m-s-12 col--t-s-6">
    <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg">
  </div>
  <div class="col--m-s-12 col--t-s-6">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships.

Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards in e-tailers.</div>
  </div>
</div>

Current issue:

Additional issue:

Desired result:

Have you tried `width: 100%` on the image? https://jsfiddle.net/40bwh139/4/ — Michael Benjamin, Jul 30 '18 at 23:01
@Michael_B that works, but now i have to solve for the fact that the text has a greater height than the image. — usernameabc, Jul 31 '18 at 21:23

Stef · Answer 1 · 2018-08-03T05:04:41.970

html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test3</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<main class="holder">
  <section class="left-div">
    <h1 class="flat-invisible">test-3</h1> 
    <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg" alt="stock photo large group of business people standing with folded hands together">
  </section>
  <aside class="right-div">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships.

Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards in e-tailers.</div>
  </aside>
</main>
</body>
</html>

css:

.left-div {
  float: left;
  grid-area: section;
  max-width: 100%;
  max-height: 100%;
}
 .flat-invisible {
  margin: 0em;  
  padding: 0em;
  line-height: 0em;
  height: 0em;
  visibility: hidden;
}
.left-div > img {
  object-fit: cover;
  top: 0px;
  height: 100%;
  max-width: 120%;
}
.right-div {
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 150px;
  max-width: 50%;
  grid-area: aside;
  max-height: 100%;
}
.holder {
  max-width: 90%;
  background-color: #eee;
  display: grid;
  grid-template:
    'section aside';
}

when i tried this on the example and our site, we found it to have the same issue as the image under "Additional Issue" in the question. — usernameabc, Aug 01 '18 at 16:16
that example was helpful. When I set the text to be longer then the image height, i noticed the image was stretched. So I had to add `object-fit: cover;` to `.left-div > img` and i got what i needed. This allows the image to grow as the text height grows, but also "crops" the image so that it only covers what it is able to and this is acceptable. — usernameabc, Aug 02 '18 at 16:25
added it to answer and test-3.html also added a img alt and a h1 with css class to make it flat and invisible, it now passes html5 validation — Stef, Aug 03 '18 at 05:02

Charu Maheshwari · Accepted Answer · 2018-08-01T05:27:15.800

You need to apply max-width:100% on your image. Now even after applying the following style your image will not take whole place in full screen(1600*900px), this is happening because your original image is of less size(450*274) and the container where your are trying to fit is 792px approx. Try using a bigger image then it will be solved.

.flex__wrapper {
  display: flex;
  position: relative;
  background-color: #eee;
  flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
  .flex__wrapper {
    max-width: 56%;
   }
}
[class*=col--] {
  box-sizing: border-box;
  flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col--m-s-12 {
  width: 100%;
}

.col--t-s-6 {
  width: 50%;
}

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

<div class="flex__wrapper">
  <div class="col--m-s-12 col--t-s-6" style="border:solid 1px;">
   <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg" class="img-fluid">
  </div>
  <div class="col--m-s-12 col--t-s-6">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive
      applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships. Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without
      market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards
      in e-tailers.</div>
  </div>
</div>

Another issue if no width is added to wrapper on big screens

see updated question for additional testing that i found while testing this. it looks like as long as text column has a smaller height than image, then the two columns works as expected. — usernameabc, Jul 31 '18 at 21:30
I have updated the answer for you. However, There will again be a problem please refer above screenshot. Now the issue is you are trying to adjust image with text, but on big screens, there will be a scenario when Image will be bigger than text. To handle that scenario you need to apply some width to parent (flex__wrapper), where in the max-width will be applied on big screen so that text is wrapped from top to bottom in right side div, accordingly image will also be adjusted. Please see if it solves your issue. — Charu Maheshwari, Aug 01 '18 at 06:02
I have updated the question to include the details about the container so this will not be an issue. After applying this, now the image is able to go full text height and does what i need it to do. — usernameabc, Aug 01 '18 at 15:49

How to keep two columns the same height with image?

2 Answers2