Question

我正在尝试在用户悬停我的图像时放大图像，并在悬停时返回其原始高度和宽度。我无法将图像大小扩大到我想要的值。当我悬停时，似乎图像变得非常大。不知道我做错了什么。谢谢你的帮助。

$('#image_layout').on({
        mouseenter: function() {
            var $this=$(this);
            console.log($this.height());
            $(this).css("z-index", 1).animate({
                    height: "120%",
                    width: "120%"                    
                }, "fast");

            $(this).after('hfdsuhods');
        },
        mouseleave: function() {
            $(this).css("z-index", 0).animate({
                    height: "100%",
                    width: "100%"

                }, "fast");
        }
     }, "img");




//images are from ajax call and the sizes are varies. 
<div id='image_layout'>
    <img src='a.jpg' />
    <img src='b.jpg' />
    <img src='c.jpg' />
</div>

Answer 1

                height: "120%",
                width: "120%"

这段代码意味着使图像大小为120％，这意味着比现有大20％。如果图像已经相当大，那么它会增加20％。我会将这些值改为你更舒服的东西，从105％开始然后从那里开始。它不会是一个非常大的增加，但它至少会阻止它在你盘旋时“非常大”。

简单图像调整大小问题

1 个答案: