How to define height of a container by an element within that container

1
votes

I'm trying to define the height of my container based off of the image within that container using jquery or javascript. Is this possible? My code is as follows: 

<div class="img-info">
<img src="images/photos/thumb_sample_l.jpg" alt="sample" title="Sample thumbnail" width="100%" />
</div>
2
javascriptjqueryhtml
Generally containers will take on the height of their content implicitly. – Pointy
The default value of the css height (and width, in fact) property is automatically computed by the browser to be big enough to hold whatever is in it – nbrooks
Perhaps OP is trying to set the height by the image, then let the rest of the content overflow with a scrollbar? – Matchu
try this: $('.img-info').height($('.img-info > img').height()) – undefined
Raminson, this works perfectly! Thanks, problem solved. – BeDesinged

2 Answers

0
votes

the javascript code to manage your content height according to the screen height may be helpful for you..

<script type="text/javascript">
  $(document).ready(function () {
  var scrheight=screen.availHeight;
  //alert(scrheight-270);
  $('.TabbedPanelsContent').css('max-height',scrheight-270);
  $('.TabbedPanelsContent').css('overflow','auto');
  });
  </script>

use your class name instead of TabbedPanelsContent here will made you want u want.

0
votes

This jQuery script should do the trick

var imgHeight = $('.img-info img').height();
$('.img-info').css({'height':imgHeight});