The image automatically adapts to the size is a very common function, in the production time in order to prevent the picture to open the container and the picture size of the necessary control, we can use CSS to control the picture to make it adaptive size?
Here are two ways to provide you, I personally recommend the first method
Method One
CSS Control picture Size code
<style type= "Text/css" >
IMG {
border:0;
margin:0;
padding:0;
max-width:200px;
Width:expression (this.width>200?) 200px ": this.width);
max-height:200px;
Height:expression (this.height>200?) 200px ": this.height);
}
</style>
<body>
<img src= "A.jpg"/>
</body>
Method Two
<style type= "Text/css" >
Div
{
max-width:600px;
width:600px;
Width:expression (document.body.clientwidth>600?) 600px ":" Auto ");
Overflow:hidden;
}
</style>
max-width:600px; In IE7, FF and other non-IE browsers the maximum width of 600px. But it is not valid in IE6.
width:600px; The size of the picture in all browsers is 600px;>
When the picture size is greater than 600px, it is automatically reduced to 600px. Valid in IE6.
<img src= "B.jpg"/>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
