5

I am attempting to set the height of an image to the height of the text which is adjacent.

I've tried using the jQuery code which I found in an answer to the question How to set height of element to match height of another element?, however it makes the image too large (it's height is higher than the text).

$("#img").css("height", $(".text").height());
img {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
<div class="text">
  <h2>Example</h2>
  <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
  <p>Example Example</p>
  <p>Length: 111 min</p>
  <p>Example Example Example</p>
  <p>Example Example Example Example Example Example Example Example Example Example Example</p>
</div>
</div>

It would not work to manually set the height, as the image and text are dynamic, meaning they can change.

JsFiddle: https://jsfiddle.net/y9f0xhm0/

Community
  • 1
  • 1
The Codesee
  • 3,714
  • 5
  • 38
  • 78
  • 1
    Possible duplicate of [How to set height of element to match height of another element?](http://stackoverflow.com/questions/10458465/how-to-set-height-of-element-to-match-height-of-another-element) – Krystian Borysewicz Jan 29 '17 at 12:21
  • Do you need to write this by yourself, or you could use a plugin? If plugin is a solution then check this out (have used it many times and didn't have any issues with it yet): https://github.com/liabru/jquery-match-height – yavor.vasilev Feb 03 '17 at 10:47

6 Answers6

10

The answers I had received all had flaws in them which I discovered (such as if the page width was decreased, the image would be messed up) and overall, they were over-complicated.

After some research, a help from a friend who I 'collaborated' with over JsFiddle and a subsequent question which I posted, I have this code which solves my question of how to set the images's height the same as the adjacent text to it:

$("#here").find('img').css("height", $(".text").outerHeight());

var $img = $("#here").find('img');
$img.on('load', function() {
  $("#here").find('img').css("height", $(".text").outerHeight());
});

window.onresize = function() {
  $("#here").find('img').css("height", $(".text").outerHeight());
}
img {
  float: left;
}
p:last-of-type {
  margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
  <div class="text">
    <h2>Example</h2>
    <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
    <p>Example Example</p>
    <p>Length: 111 min</p>
    <p>Example Example Example</p>
    <p>Example Example Example Example Example Example Example Example Example Example Example</p>
  </div>
</div>

JsFiddle: https://jsfiddle.net/f512ejag/2/

The Codesee
  • 3,714
  • 5
  • 38
  • 78
  • @JoostS Included a JsFiddle in my answer. Defo does work. – The Codesee Feb 06 '17 at 07:23
  • It doesn't work. Just resize the screen until the result panel is about 300px wide. It will break beyond repair from then on. – AVAVT Feb 06 '17 at 14:45
  • @AVAVT That is why you add a `max-width` and a `min-width` for the image. My original question was 'set the height of an image to match the height of the text next to it' and did not include the scaling issue (which is why I didn't bother to put it in my answer above). – The Codesee Feb 06 '17 at 16:01
  • Hm interesting, so it wouldn't matter if the aspect ratio of the image is distorted? – AVAVT Feb 06 '17 at 16:11
  • @AVAVT My question was how to make an image's height adjust to the text adjacent to it. – The Codesee Feb 06 '17 at 16:20
  • I must say that it works quite well under 'normal' conditions. Well done! I love a simple solution! However, because you are talking about decreasing the page width, adding the condition: `if($(window).width() > 500)` is required to make it a valid answer. Could you add that, please, so your answer will be useful to others? Thanks! – Mr. Hugo Feb 06 '17 at 19:12
1

You can only approximate a solution numerically, because changing the size of the image will in turn change the height of the text (because it has more or less space to be laid out) and vice versa (circular dependency). It is not even guaranteed that there is a solution. Because if the space gets too small it is impossible for image and text to have the same height, it just doesn't fit. In which case my solution falls back to the default size.

<div class="image-text">
  <img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" />

  <div class="text"> 
    <p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell example</p>

    <p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell example</p>

    <p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell example</p>    
  </div>
</div>

var containerElement = document.querySelector('.image-text');
var textElement = document.querySelector('.text');
var imageElement = document.querySelector('img');

//Cancel approximation when the height difference is less than DELTA.
var DELTA = 1;

var adjustImageHeight = function() {
  while(Math.abs(textElement.offsetHeight - imageElement.offsetHeight) > DELTA) {
    imageElement.style.height = ((imageElement.offsetHeight + textElement.offsetHeight) / 2) + 'px';    

    //Image grows larger than container, reset its size.
    if(imageElement.offsetWidth > containerElement.offsetWidth) {
      imageElement.style.height = 'auto';
      return;
    }
  }  
};

window.addEventListener('resize', adjustImageHeight);
adjustImageHeight();

http://jsbin.com/ganakorake/edit?html,css,js,output

Prinzhorn
  • 22,120
  • 7
  • 61
  • 65
  • @TheCodesee I can add as many lines as I want. As long as the browser window is wide enough I have the image and text side by side. But the more text you get, the sooner you reach a point where they cannot be side by side and the text wraps belong the image. – Prinzhorn Jan 29 '17 at 21:40
  • @TheCodesee which browser are you using? It looks like this for me in Chrome and Firefox http://imgur.com/a/TIlei – Prinzhorn Jan 31 '17 at 06:37
  • @TheCodesee as I said in my answer, that's because it is **impossible** for the image to have the same height at some point. There just isn't enough room. No matter how much you wish for it. – Prinzhorn Jan 31 '17 at 18:56
0

You need to sum height of all p set it to height of img. I used .each() to iterate p elementx and set height of them in variable.

var height = 0;
$("p").each(function(){
  height += $(this).height();
});
$("img").height(height);


var height = 0;
$("p").each(function(){
  height += $(this).height();
});
$("img").height(height);
img { float: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" />
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>

But it does not consider margin of paragraphs. Another way is get height of text using .offset() like bottom code.

var topPos = $("p:first").offset().top;
var bottomPos = $("p:last").offset().top;
$("img").height(bottomPos - topPos);


var topPos = $("p:first").offset().top;
var bottomPos = $("p:last").offset().top;
$("img").height(bottomPos - topPos);
img { float: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" />
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
Mohammad
  • 21,175
  • 15
  • 55
  • 84
0

var left= $("#leftdiv").height();

var yourImg = document.getElementById('rightdiv');
if(yourImg && yourImg.style) {
    yourImg.style.height = left+"px";
    yourImg.style.width = left+"px";
}
img {
  float: left;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://www.freesoftware4all.co.uk/wp-content/uploads/2016/08/TSR-Watermark-Image.png" id="rightdiv"  style="float:right;max-width:50%"/>

<div id="leftdiv"  style="float:right;max-width:50%">
<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>

<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>

<p>This is just some example text because there are seven letters in example. They are E, X, A, M, P, L, E and they spell exampe</p>
</div>
Pravesh Agrawal
  • 869
  • 1
  • 11
  • 27
0

As i haven't find any better solution except this. 

$("#img").css("height", $(".text").height());
setTimeout(function() {
    $("#img").css("height", $(".text").height());
}, 0)

And i also think with that you could get a clue why it's can't be done accurately. When the image resized text also get resized then image again need to resized and on..

You can run the snippet or see the fiddle.

$("#img").css("height", $(".text").height());
setTimeout(function() {
  $("#img").css("height", $(".text").height());
}, 0)
img {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
<div class="text">
  <h2>Example</h2>
  <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
  <p>Example Example</p>
  <p>Length: 111 min</p>
  <p>Example Example Example</p>
  <p>Example Example Example Example Example Example Example Example Example Example Example</p>
</div>
Parvez Rahaman
  • 4,269
  • 3
  • 22
  • 39
0

Here is a simple solution using jQuery. 

var h = $(".text").height();
  $("#img1").height(h);
img {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="here">

<div class="text">
  <img id ="img1" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img">
  <h2>Example</h2>
  <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
  <p>Example Example</p>
  <p>Length: 111 min</p>
  <p>Example Example Example</p>
  <p>Example Example Example Example Example Example Example Example Example Example Example</p>
</div>
</div>

Working Demo: http://codepen.io/shalineesingh/pen/NdzQqE

Shalinee SIngh
  • 199
  • 8