webView 自适用图片

iteye_15461

于 2010-12-03 10:21:00 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签： JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_15461/article/details/81968333

android 专栏收录该内容

880 篇文章

订阅专栏

本文介绍了一种使图片能够自适应浏览器窗口大小的方法。通过监听图片加载完成事件并使用 JavaScript 动态调整图片的宽度或高度，确保图片始终充满整个浏览器窗口且保持原始宽高比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只适用宽高可以

<img src="huge-image.jpg" width="100%" />

<img src="huge-image.jpg" height="100%" />

不过这样只能拉伸

<img src="huge-image.jpg" onload="resize(this);" />


<script type="text/javascript">

    function resize(image)
    {
        var differenceHeight = document.body.clientHeight - image.clientHeight;
        var differenceWidth  = document.body.clientWidth  - image.clientWidth;
        if (differenceHeight < 0) differenceHeight = differenceHeight * -1;
        if (differenceWidth  < 0) differenceWidth  = differenceWidth * -1;

        if (differenceHeight > differenceWidth)
        {
            image.style['height'] = document.body.clientHeight + 'px';
        }
        else
        {
            image.style['width'] = document.body.clientWidth + 'px';
        }

        // Optional: remove margins or compensate for offset.
        image.style['margin'] = 0;
        document.body.style['margin'] = 0;
    }

</script>