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/
6 Answers
Answers 1
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/
Answers 2
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(); Answers 3
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>Answers 4
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>Answers 5
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>Answers 6
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
0 comments:
Post a Comment