Question

我有一个令人尴尬的简单问题：如何在没有硬编码宽度和高度属性的情况下以两倍大小显示图像？这是我尝试过的，但我最终只需输入1000的宽度和高度。我的功能有问题吗？谢谢！

<img onload="double(self.id);" name="bigPic" id="bigPic" src="album1.jpg" height="1000" width="1000"/>

    function double(id) {
        var img = document.getElementById(id);
        var dblWdth = img.width * 2;
        var dblHt = img.height * 2;

        img.height = dblHt;
        img.width = dblWdth;
    }

Answer 1

不是double(self.id);而是double(this.id);

demo。

你可以通过this，这会更简单。

function double(img) {
    img.height *= 2;
    img.width *= 2;
}

Answer 2

你必须使用window.load函数（）来实现这个

window.onload=function() {double("bigPic");
    }

Answer 3

window.onload = function() {
     double("bigPic")
};

这应该可以解决问题。您可以使用窗口onload方法执行加载页面时需要完成的所有操作。

Answer 4

如果你使用jquery，你可以这样做：

<img name="bigPic" id="bigPic" src="album1.jpg" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#bigPic")[0].width *= 2;
        $("#bigPic")[0].height *= 2; // may not be necessary, see note
    });
</script>

没有jquery：正如Okonomiyaki3000所指出的那样，double不是函数名的好名字，因为它是JavaScript中数据类型的保留字。

<img name="bigPic" id="bigPic" src="album1.jpg" onload='superSize(this);' />

function superSize(me) {
    me.width = me.width * 2;
    me.height = me.height * 2; //may not be necessary, see note
}

注意：如果您没有指定高度，高度会自动加倍。反之亦然宽度。但我只在IE9和FF12上测试过。

Answer 5

你真的不需要javascript。你可以用CSS做到这一点。

img {
    zoom: 2;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

这当然会使页面上所有图像的大小翻倍。也许您想要制作一个类并将其分配给应该加倍的所有图像，或者找到一些其他方式来选择那些图像。您还可以在鼠标悬停时将其设置为双倍（悬停），或者使用动画（在某些浏览器中）使用css进行放大。

动态加倍图像大小

5 个答案: