Image Height now changing with jQuery

Question

I'm trying to change the height and width of an image when clicked on a certain button. So far I got the basics, but I think I don't have them in the right order. The image and the other text are moving, but the image size isn't changing. Right now it mostly the white space around the image changing.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>

  //image
  function shrinkImage() {
    $('#dog_image').height(200);
    $('#dog_image').width(307);
  }

  </script>
</head>

<div id="dog_image">
<img src="dog.jpg" alt="turle">
</div>

<div id="image_buttons">
  <button type="button" id="shrink" onclick="shrinkImage();">Shrink Image</button>
</div> 

Answer 1

Here's a nice way to do that :

 $('.pictureclass').click(function (e) { if ($(e.target).hasClass('expanded')) { $(".pictureclass").removeClass('expanded').stop().animate({ width: 300, height: 300 }, 300); } else { $(".pictureclass").addClass('expanded').stop().animate({ width: $(e.target).attr("width"), height: $(e.target).attr("height") }, 200); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="mrbean" class="pictureclass" src="http://2.bp.blogspot.com/-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" /> 

Answer 2

This isn't you want?

 img{ width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> //image function shrinkImage() { $('#nickel_image').height(200); $('#nickel_image').width(307); } function enlargePic() { $('#nickel_image').height(450); $('#nickel_image').width(580); } function restorePic() { $('#nickel_image').height(300); $('#nickel_image').width(460); } </script> </head> <div id="nickel_image"> <center><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="turle"></center> </div> <div id="image_buttons"> <p>Image:</p> <button type="button" id="shrink" onclick="shrinkImage();">Shrink Image</button> <button type="button" id="enlarge" onclick="enlargePic();">Enlarge Pic</button> <button type="button" id="restore" onclick="restorePic();">Restore Pic</button> </div>