jquery中加载图片自适应大小设置问题

最新推荐文章于 2021-06-04 11:15:07 发布

IT狗探求

最新推荐文章于 2021-06-04 11:15:07 发布

阅读量2.1k

点赞数 1

分类专栏： Jquery 文章标签：图片自适应大小 jquery

本文链接：https://blog.csdn.net/a123demi/article/details/10000329

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如何在固定大小的div 中放置一个图片，当图片较小时显示实际大小，当图片超过div 大小时图片自动适应div 的大小

实现过程的主要代码：

        .divImg{
            max-height:200px; max-width:200px;
            width: expression(this.width > 200 && this.width > this.height ? 200 : auto);
            height: expression(this.height > 200 ? 200 : auto);
        }

实例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>

    <title>实现图片加载自适应</title>
    <script type="text/javascript" src="../jquery.min.js"> </script>
    <script type="text/javascript">
        function clickMe(){
            var url="../Images/1.jpg";
            $("#img").attr("src",url);
            $("#img").addClass("divImg");
        }

    </script>
    <style type="text/css">
        .divClass {
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }



        .divImg{
            max-height:200px; max-width:200px;
            width: expression(this.width > 200 && this.width > this.height ? 200 : auto);
            height: expression(this.height > 200 ? 200 : auto);
        }

    </style>

</head>

<body>
    <div class="divClass">
        <img id="img" > </img>
    </div>
    <div>
        <input type="button" id="btn" style="width:50px;height: 30px;border:1px solid blue;"

	value="btn" οnclick="clickMe()"/>
    </div>
</body>
</html>

IT狗探求

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录