Html上的图像大小调整问题

Image resizing issue on Html

本文关键字：调整 问题 图像 Html      更新时间：2023-09-26

我试过了。它可以在小提琴上工作。但不工作与html。图片会被加载，但不会在滚动时调整大小。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var current_h = $('img').height();
var current_w = $('img').width();
        $('.resize').hover(
        function () {
            $(this).stop(true, false).animate({
                width: (current_w * 3.15),
                height: (current_h * 3.15)
            }, 300);
        }, function () {
            $(this).stop(true, false).animate({
                width: current_w + 'px',
                height: current_h + 'px'
            }, 300);
        });
</script>
</head>
<body>
<div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"/>
</div>
</body>
</html>

这里有什么问题吗?

您需要执行onload -您的代码在图像存在之前运行:

$(function() { // when the page has loaded
  var current_h = $('img').height();
  var current_w = $('img').width();
  $('.resize').hover(
    function() {
      $(this).stop(true, false).animate({
        width: (current_w * 3.15),
        height: (current_h * 3.15)
      }, 300);
    }, function() {
      $(this).stop(true, false).animate({
        width: current_w + 'px',
        height: current_h + 'px'
      }, 300);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="box">
  <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" />
</div>

如果您有多个图像，您可以将每个图像的大小保存在img的data属性中—我还将高度添加到图像标记中。

$(function() { // when the page has loaded
  $(".box img").each(function() {
    $(this).data("w",$(this).width());
    $(this).data("h",$(this).height());
  });
  $('.resize').hover(
    function() {
      $(this).stop(true, false).animate({
        width: ($(this).data("w") * 3.15),
        height: ($(this).data("h") * 3.15)
      }, 300);
    }, function() {
      $(this).stop(true, false).animate({
        width: $(this).data("w") + 'px',
        height: $(this).data("h") + 'px'
      }, 300);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="box">
  <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" height="250" />
</div><div class="box">
  <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" height="250" />
</div>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  
  $(document).ready(function(){
      var current_h = $('img').height();
var current_w = $('img').width();
        $('.resize').hover(
        function () {
            $(this).stop(true, false).animate({
                width: (current_w * 3.15),
                height: (current_h * 3.15)
            }, 300);
        }, function () {
            $(this).stop(true, false).animate({
                width: current_w + 'px',
                height: current_h + 'px'
            }, 300);
        });
  
  });
</script>
</head>
<body>
<div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"/>
</div>
</body>
</html>

试试下面的

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){ // Note this line
var current_h = $('img').height();
var current_w = $('img').width();
        $('.resize').hover(
        function () {
            $(this).stop(true, false).animate({
                width: (current_w * 3.15),
                height: (current_h * 3.15)
            }, 300);
        }, function () {
            $(this).stop(true, false).animate({
                width: current_w + 'px',
                height: current_h + 'px'
            }, 300);
        });
        }); // note that the additional line ends here
</script>
</head>
<body>
<div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"/>
</div>
</body>
</html>

也请参考Jquery文档$(document).ready

尝试用$(document).ready()包装你的函数。因为您的代码在加载图像之前正在运行。

下面是一个工作示例

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var current_h = $('img').height();
      var current_w = $('img').width();
      $('.resize').hover(
        function() {
          $(this).stop(true, false).animate({
            width: (current_w * 3.15),
            height: (current_h * 3.15)
          }, 300);
        }, function() {
          $(this).stop(true, false).animate({
            width: current_w + 'px',
            height: current_h + 'px'
          }, 300);
        });
    });
  </script>
</head>
<body>
  <div class="box">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" />
  </div>
</body>
</html>

修改

img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250"


img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" class="resize" width="250" height="250"

我想这会解决你的问题。

谢谢

相关文章：