图像高度现在通过jQuery更改

Question

我正在尝试单击某个按钮时更改图像的高度和宽度。 到目前为止，我已经掌握了基础知识，但是我认为我没有正确的基础知识。 图像和其他文本正在移动，但是图像大小没有变化。 目前，图像周围的空白大部分在变化。

<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

这是一个很好的方法：

 $('.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

这不是你想要的吗？

 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>