How To Fit Image Height To Juxtaposed Text Height

I have an image and a text side by side (image to left, text to the right). Any idea on how to get the image height to resize according to text paragraphe height (and width staying

Solution 1:

Maybe a flex solution like this :

Go full width and resize the screen, it's working but there is some bugs when the image start growing faster (so we may limit this with media query or max-height)

.container {
  display: flex;
  width: 100%;
}

.container>div:nth-child(1) {
  flex:0;
  width: fit-content;
}
.container>div:nth-child(2) {
  flex: 1;
}

img {
  width: auto;
  height: 100%;
  max-height:500px; /* Limit the height to avoid bugs when the image get bigger */
}

<divclass="container"><div><imgsrc="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff"></div><div><p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p></div></div><divclass="container"><div><imgsrc="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff"></div><div><p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u
    </p></div></div><divclass="container"><div><imgsrc="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff"></div><div><p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p></div></div>

Solution 2:

Here's what you're asking for:

1. Image changes height according to paragraph height. Which means...
2. Image changes width, which means...
3. Paragraph re-flows in remaining space, most likely resulting in new height, which means...
4. You're back to step 1.

Given the above, there are two possible scenarios:

1. You're lucky and at some point 3. won't result in paragraph changing height, hence not triggering 1. => your script stops.
2. You're not so lucky and 3. always triggers 1. alternating between 2 image heights / paragraph reflows. The page dances/flickers before you and it's blocked rendering until it crashes the browser.

---

Additionally, in some cases the image will get enlarged way above its natural size, which should be avoided.

---

With the reserve it's really not a good idea to use this in a production environment, here is what you asked for. To my surprise, at least for the image + paragraph you use in your example, it doesn't crash the browser. But I'm pretty sure there are sizes at which it would. Feel free to test it out:

functionbestFit(el) {
  let image = $('img', el),
      paragraph = $('p', el);
  if (image.width() < paragraph.width() / 1.5) {
  	
    image.css({
      height: paragraph.height() + 'px', 
      width: 'auto'
    });
    
  	
    if (image.height() !== paragraph.height()) {
      bestFit(this);
    }
  } else {
    image.css({
      width: image.closest('.best-fit').width() * .4 + 'px',
      height: 'auto'
    });
  }
}
functionresizeImages() {
  $('.best-fit').each(function(){bestFit(this)});
}

$(window).on('load resize', resizeImages);

.best-fit {
  display: flex;
  position: relative;
}
.best-fitimg {
  padding: 1em0;
  display: inline-block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="best-fit"><div><imgsrc="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff"style="width:auto; height:auto;"></div><div><p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p></div></div>

Edit: I've added a small tweak to not allow image to get above 40% of total width.