CODEWITHSUNDEEP
javascriptjqueryhtmlcss
The Codesee
The Codesee

Reputation: 3781

Image won't correctly adjust to the height of a div

I am attempting to set the height of an image to the height of an adjacent div.

The issue is that the last <p> element is appearing under the image, even after using JavaScript to grab the height of the div and use it to set the height of the image.

$("#here").find('img').css("height", $(".text").outerHeight());
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" alt="RED">
  <div class="text">
    <h2>Movie: RED</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, former black-ops agent Frank Moses reassembles his old team in a last ditch effort to survive and uncover his assailants.</p>
    <p>Movie Categories Action, Comedy, Crime</p>
    <p>111 min long</p>
    <p>Some actors were Bruce Willis, Mary-Louise Parker, Heidi von Palleske, Karl Urban</p>
    <p>Rated: PG-13</p>
  </div>
  <br>
  <input type="submit" value="Add">
</div>

You can reproduce the issue at http://thecodesee.pe.hu/ by clicking the submit button.

Here is my desired outcome:

enter image description here

Here is what it currently looks like:

enter image description here

Upvotes: 1

Views: 79

Answers (3)

Lina Hammami
Lina Hammami

Reputation: 393

you can fix it with css simple css code ; by adjusting width dimensions like : 

 img {
  float: left;
  width: 25%;
}
.text {

  width : 75%;
}

Upvotes: 0

heshik nandan
heshik nandan

Reputation: 21

The image is sized only when the page loads or only when the function is called. I believe you have to write a window.onresize() event to constantly change the image size according to the layout.

$(document).ready(function(){
            window.onresize = function(){
            $("#here").find('img').css("height", $(".text").outerHeight());     
            }

        });

However this doesnt cater for the first time load. The div seems to be rendered after the size is being retrieved. You might want to ensure the div has been rendered before you grab the outerHeight(), by using .ready() for that patricular

Upvotes: 1

B. Desai
B. Desai

Reputation: 16436

Try this solution. 

$.ajax({
         type: "POST",
         url: "search.php",
         success: function(data) {
            $("#here").css("display", "block");
            $("#here").html(data).promise().done(function() {
               $("#here").find('img').css("height", $(".text").outerHeight());
               var $img = $("#here").find('img');

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

     }
  });

Upvotes: 1

Related Questions