CODEWITHSUNDEEP
javascripthtml
Rob Harris
Rob Harris

Reputation: 21

How to resize div height to match height of image within it

Using Javascript how do I set a div height to automatically match the height of the image that is set to width 100% contained within it when I view in responsive view?

Upvotes: 0

Views: 130

Answers (3)

lucusp
lucusp

Reputation: 185

Two things I would suggest trying:

1) the unslider lib should automatically adjust to your height, according to their site: unslider.

2) have you set image height: height: 100%?

Also try setting the 'float' property on the images ie float: left. You'll be surprised how much that stuff helps.

Upvotes: 0

Rob Harris
Rob Harris

Reputation: 21

Here's my code:

<div class="banner">

<ul>
<li><img src="resources/images/header1.jpg" style="width:100%;"></li>
<li><img src="resources/images/header2.jpg" style="width:100%;"></li>
<li><img src="resources/images/header3.jpg" style="width:100%;"></li>
</ul>

</div>

basically the banner div doesnt reduce in size to match the height of the image as it gets smaller many thanks again for all your help

Upvotes: 0

Calvin Froedge
Calvin Froedge

Reputation: 16373

You need a bit of css:

div.imageContainer {
  overflow:auto;
}

Make sure height is not set on the div, and make sure the image is not positioned absolutely within the div. You don't need javascript for this.

Upvotes: 3

Related Questions