How to place a picture in a fixed-size div, display the actual size when the picture is small, and automatically adapt to the div size when the picture exceeds the div size
jquery image Adaptive Size The main code of the implementation process:
The code is as follows:
Copy Code code as follows:
. divimg{
max-height:200px; max-width:200px;
Width:expression (This.width > && this.width > This.height 200:auto);
Height:expression (This.height > 200:auto);
}
Instance:
The code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "Text/html:charset=utf-8"/>
<title> realize picture loading adaptive </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 > && this.width > This.height 200:auto);
Height:expression (This.height > 200:auto);
}
</style>
<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" onclick= "ClickMe () "/>
</div>
</body>
