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

港控/mmm° 2024-04-17 05:21 70阅读 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>