CODEWITHSUNDEEP
javascriptjquerycss
Gops
Gops

Reputation: 697

Apply Image height to Div on resizing

I have a slider inside a div. However slider's relative positions makes the slider to go below the container div. I thought of increasing the height of div by getting the height of the slider image and adding it to the class/id of the respective div.

var img = $("#gallery > img");
$("#gallery").css({width:img.width(), height:img.height()});

HTML CONTENT

 <div id="gallery">

  <img class="img-responsive" src="images/shom/gallery/birdsview.jpg"/>
  <img class="img-responsive" src="images/shom/gallery/living.jpg"/>
  <img class="img-responsive" src="images/shom/gallery/bedroom.jpg"/>

</div>
<div class="col-md-12>Some description here</div>

CSS PART

#gallery { position: relative; }
#gallery > img { position: absolute; left: 0; top: 0; display: none; }
#gallery > img:first-child { display: block; }

Above you can see the script I used. But the issue is when I resize the browser window, the height is not adapting accordingly. It still applies the height, when the page was loaded initially.

Looking forward for your support on this.

Upvotes: 1

Views: 47

Answers (1)

Rohith Murali
Rohith Murali

Reputation: 5669

The perfect solution to handle such a situation is to handle with css, because if you have a slider inside a container, the container is supposed to grow at least as much as its contents unless it has a fixed height.

How ever now, you can fix this issue by running the script again while the window resizes,

$( window ).resize(function() {
  var img = $("#gallery > img");
  $("#gallery").css({width:img.width(), height:img.height()});
});

The resize event is sent to the window element when the size of the browser window changes.

Upvotes: 1

Related Questions